Top Border Equal To Wrapping Text Width-CodePudding

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 >
  <div ><span>1 Test</span></div>
  <div ><span>Test123 Test</span></div>
  <div ><span>Testi</span></div>
  <div ><span>T asd</span></div>
  <div ><span>Testing 5</span></div>
</div>

CodePudding user response：

.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;
}

CodePudding user response：

Add width: min-content in:

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