Search code examples
htmlcssunderline

Thick underline behind text

How to reproduce this sort of underline behind the text ABC using spans and css?

thick underline behinde image

I have been able to do underline below the text with nested span and colored border-bottom, but cannot get it behind the image and above the text base line.

<p style='font-size:100px'>
  <span style='border-bottom:30px magenta solid'><span>A</span></span>
  <span style='border-bottom:60px magenta solid'><span>B</span></span>
  <span style='border-bottom:90px magenta solid'><span>C</span></span>
</p>

Solution

  • Another possibility:

    p {
  font-size: 100px;
  font-family: arial;
}

span {
  padding: 0 10px;
  box-shadow: inset 0 -0.4em 0 0 magenta;
}

span:nth-child(2) {
  box-shadow: inset 0 -0.55em 0 0 magenta;
}

span:nth-child(3) {
  box-shadow: inset 0 -0.7em 0 0 magenta;
}
    <p>
  <span>A</span><span>B</span><span>C</span>
</p>