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

<p>

<p>Creating a Thick Underline Behind Text Using CSS and Spans

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

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

<p>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.

<p>HTML:

<p>

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

<p>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.

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

<p>HTML:

<p>
  ABC

<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!