Inclure l'élément d'entretien des enfants dans la décoration de texte

Vous pouvez appliquer une décoration de texte à votre portée, mais il apparaîtra juste sous le texte de la plage et non en ligne avec le texte précédent. Pour le faire en ligne, vous devrez rendre votre étendue de la même hauteur que son conteneur parent. Sinon, vous pouvez utiliser probablement un pseudo élément (: avant ou: après) pour mettre la ligne où vous le souhaitez.

Cela se produit en raison de la spécification CSS selon laquelle disent fondamentalement, vous ne pouvez pas avoir de décoration de texte dans des éléments de bloc en ligne. Si vous envisagez également de la décoration de texte, vous devez modifier l'affichage : Inline-Block Strong>. Plus d'informations peuvent être trouvées dans cette question .

Juste pour vous montrer, comment cela fonctionnerait, si la portée était effectuée par la décoration de texte, voici un exemple: p>

p>

<a href="#">
   My title is here
   <span class="badge badge-dark">Special</span>
</a>

Vous pouvez utiliser la propriété bordure-bas code> au lieu de texte-décoration code>.

Voir aussi que j'ai changé le A code> à un Inline-Block CODE> ELEMENT. P>

P>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">
  <div class="row">
    <div class="col">
      <a class="title-link" href="#">My title is here
      <span class="badge badge-dark">Special</span></a>
    </div>
  </div>
</div>

La taille de la police du contenu dans le badge est différente de celle du texte de la liaison et vous avez également un alignement de haut: -5px. Ces deux brisent la ligne et même sans utiliser le badge de bootstrap, vous obtiendriez la décoration de texte cassée. Oui, il s'étendrait au texte de la plage mais être brisé et ce ne serait pas ce que vous voulez. Et Bootstrap Badge a également le style de décoration de texte: aucun ... Une autre façon d'obtenir le soulignement en pointillé pour étendre le badge est de retirer la décoration de texte et d'utiliser la frontière comme celle-ci ci-dessous:

      a {
        font-size: 36px;
        border-bottom: 3px dotted rgb(221, 221, 221);
        color:  #000;
      }

      a:hover {
        color: #000;
        border-bottom: none;
      }

https://developer.mozilla.org/en -US / DOCS / Web / CSS / Texte-Décoration :

La propriété CSS sténographie-décoration Text-décoration définit l'apparition de lignes décoratives sur texte forts>. p> BlockQuote>

Cela signifie que le soulignement sera directement sous le texte en question et non sous l'élément. Si vous zoomez assez, vous verrez que le soulignement est en réalité sous le mot spécial p>

si vous souhaitez continuer la ligne sous spéciale, vous pourriez peut-être utiliser un élément pséduo pour votre badge et ajouter une non-rupture espaces pour s'asseoir dans: p>

p>

<a href="#" class="badge badge-dark">
   My title is here 
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</a>