I have the following code
footer ul li h3 {
font: 700 15px/40px 'Roboto', sans-serif;
border-bottom: 1px solid #4da494;
text-transform: uppercase;
color: #4da494;
margin: 25px 0;
width: 50%;
cursor: default;}
I've placed width: 50% just to have the border fixed, so you can view it. But, I would like the border-bottom width to be equivalent to the word that is within H3 . In case she followed the width of the Institutional .
<h3>Institucional</h3>
Just apply the border to a span element within the h3 element. Here's an example:
h3 {
background: #FFFFE0;
}
h3 > span {
border-bottom: 3px solid red;
}<h3><span>Stack Overflow em Português</span></h3>Note: The yellowish background in the example above is only meant to indicate the dimensions of the element
h3.
The span element, by default, has display: inline and adjusts to the size of its content, so the border is applied exactly the size of the text.
How to commented , it will also be possible to use display: inline-block for the h3 element itself, but this brings some concerns about the layout around this element, because if there are inline elements, they will be moved to the h3 side %.
The h3 tag has the size of 1.3em , so you can use this measure to set border-bottom :
border-bottom: 1.17em solid blue;
Most browsers will render fonts in the following sizes:
h1 é 2 em
h2 é 1.5 em
h3 é 1.17 em
h4 é 1.33 em
h5 é .83 em
h6 é .67 em
Information taken from W3C