How Can I Create a Thick Underline Effect Extending Behind Text Using CSS?

Creating a Thick Underline Behind Text Using CSS and Spans

To achieve the thick underline effect seen in the image provided, a combination of spans and CSS properties can be employed.

Solution باستخدام border-bottom:

The primary approach involves creating nested spans for each character and applying a solid border-bottom with varying thicknesses. By positioning the spans vertically, an effect of multiple lines below the text is achieved. However, this method does not extend the underline behind the text.

HTML:

<p></p>

Solution باستخدام box-shadow:

An alternative approach is to utilize the box-shadow property with negative values to create the illusion of a thick underline behind the text. By setting the inset property, the shadow is cast inward, creating a solid line beneath the text.

CSS:

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

HTML:

<p>
  <span>A</span><span>B</span><span>C</span>
</p>

This method effectively creates a thick underline behind the text without affecting its baseline position.

The above is the detailed content of How Can I Create a Thick Underline Effect Extending Behind Text Using CSS?. For more information, please follow other related articles on the PHP Chinese website!