Make border-bottom stand on the same width as text

Asked

Viewed 946 times

0

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 put the width: 50% just to have the edge stay fixed, and be able to visualize. But, I would like the width of the "border-bottom" to be equivalent to the word within H3. In case it followed the width of the word Institutional.

<h3>Institucional</h3>
css

  • Please develop a [mcve] and check the possibility of using an element span to set the edge.

  • Worked with span

  • @Felipestoker if you don’t want to add extra elements, you can add the following property to your CSS rule: display: inline-block;.

  • I know :D But still improve the question to make more clear what you need.

2 answers

1


Just apply the edge to an element span within the element h3. Take 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 serves only to indicate the dimensions of the element h3.

The element span, by default, has display: inline and adapts to the size of your content, so the border is applied exactly the size of the text.

Like commented, also possible serous use display: inline-block for the element itself h3, but this brings some concerns in question of the layout around this element, because if there are elements inline, these will be moved to the side of the h3.

0

The tag h3 has the size of 1.3em, so you can use this measure to configure the border-bottom:

border-bottom: 1.17em solid blue;

Most browser rendered 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

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.