'Top Border Equal To Wrapping Text Width

In the bellow code the blue block has a green overline that should be the same width as the text and not overflow. Similar to the pink blocks notice how the green border is the same width as the text.

I've tried using display: inline as well with no luck. Is there maybe some hack to get this to work properly?

Fiddle: https://jsfiddle.net/xq10dnb9/

CSS:

html {
  font-size: 50px;
}
.blue {
  background-color: #a9f4f4;
}
.blocks {
  background-color: pink;
  width: 700px;
  display:flex;
  justify-content: space-between;
}
.block {
  padding: 5px;
  white-space: normal;
}
.block span {
  position: relative;
  display:inline-block;
/*   display:inline; */
}
.block span:before {
  content: '';
  height: 4px;
  background-color: green;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

HTML:

<div class="blocks">
  <div class="block"><span>1 Test</span></div>
  <div class="block blue"><span>Test123 Test</span></div>
  <div class="block"><span>Testi</span></div>
  <div class="block"><span>T asd</span></div>
  <div class="block"><span>Testing 5</span></div>
</div>
css


Solution 1:[1]

Add width: min-content in:

.block span{
    position: relative;
    display: inline-block;
    border: 1px solid black;
    width: min-content;
 }

Solution 2:[2]

.block {
  padding: 5px;
  white-space: normal;
}

When you are using padding,you might want to specify where you want to add padding to like padding-top, padding-bottom, padding-right or padding-left. If you just type padding it will just add space to all side.

So, change it to

.block {
  padding-top: 5px;
  white-space: normal;
}

Is should solve the issue. And you add this to your code

*{
  padding: 0;
  margin: 0;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 user2495207
Solution 2 Eminent_Michael

Related Questions