line of three segments colors html5 css3 - html

Question

I want to create a line divided by three sections (33% each) first of one color, second of another and a third like the first one. This is used to underline a text, the width should be modified depending on the width of the word.![enter image description here][1]

Answer 1

You can add a :after :pseudo-element with a linear-gradient.
div {
position: relative;
width: 88px;
}
div:after {
content: '';
left: 0;
bottom: -3px;
position: absolute;
width: 100%;
height: 3px;
background: linear-gradient(to right, red, green, blue);
}
<div>This is some text</div>
To dynamically set the width of the line, you'll have to use JavaScript.
var ss = document.styleSheets;
for (i = 0; i < ss.length; i++) {
var rules = ss[i];
for (j = 0; j < rules.cssRules.length; j++) {
var r = rules.cssRules[j];
if (r.selectorText == "div:after") {
r.style.width = document.getElementsByTagName('span')[0].offsetWidth + 'px';
}
}
}
div {
position: relative;
}
div:after {
content: '';
left: 0;
bottom: -3px;
position: absolute;
width: 100%;
height: 3px;
background: linear-gradient(to right, red, green, blue);
}
<div><span>This is some text</span></div>
If you want solid colors, you'll have to do it using JavaScript.
var ss = document.styleSheets;
for (i = 0; i < ss.length; i++) {
var rules = ss[i];
for (j = 0; j < rules.cssRules.length; j++) {
var r = rules.cssRules[j];
if (r.selectorText == "div:after") {
var w = document.getElementsByTagName('span')[0].offsetWidth;
r.style.width = w + 'px';
r.style.background = 'linear-gradient( to right, red, red ' + (w/3) + 'px, green ' + (w/3) + 'px, green ' + (w/3) * 2 + 'px, blue ' + (w/3) * 2 + 'px, blue ' + w + 'px)'
}
}
}
div {
position: relative;
}
div:after {
content: '';
left: 0;
bottom: -3px;
position: absolute;
width: 100%;
height: 3px;
}
<div><span>This is some text</span></div>