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

Création d'un soulignement épais derrière le texte à l'aide de CSS et de spans

Pour obtenir l'effet de soulignement épais vu dans l'image fournie, une combinaison de spans et les propriétés CSS peuvent être utilisées.

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

L'approche principale consiste à créer des travées imbriquées pour chaque personnage et à appliquer une bordure inférieure solide avec des épaisseurs variables. En positionnant les travées verticalement, un effet de plusieurs lignes sous le texte est obtenu. Cependant, cette méthode n'étend pas le soulignement derrière le texte.

HTML :

<p></p>

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

Une alternative L'approche consiste à utiliser la propriété box-shadow avec des valeurs négatives pour créer l'illusion d'un soulignement épais derrière le texte. En définissant la propriété inset, l'ombre est projetée vers l'intérieur, créant une ligne continue sous le texte.

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>

Cette méthode crée efficacement un soulignement épais derrière le texte sans affecter sa position de base.

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!