Comment puis-je créer un soulignement épais derrière le texte à l'aide de spans et de CSS ?

Soulignement épais derrière le texte avec spans et CSS

Vous souhaitez créer un soulignement épais derrière le texte « ABC » en utilisant des spans et CSS. Vous avez réussi à souligner sous le texte en utilisant des étendues imbriquées avec une bordure colorée en bas, mais vous avez du mal à le positionner derrière le texte et au-dessus de la ligne de base du texte.

Voici une autre approche pour atteindre l'objectif. voulu effet :

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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!