web-dev-qa-db-fra.com

Puis-je faire le CSS: après le pseudo-élément ajouter du contenu en dehors de l'élément?

Je souhaite formater un fil d'Ariane de liens à l'aide d'un code HTML » entité entre les liens adjacents, elle ressemble donc à ceci:

accueil " à propos de nous " historique "cette page

J'ai ajouté une règle à mon CSS:

nav#breadcrumb-trail a:after {
    content: " » ";
}

mais cela ajoute l'entité À L'INTÉRIEUR du lien, au lieu de l'extérieur - c'est-à-dire que je reçois ceci:

accueil "à propos de nous"historique " cette page

Suis-je en train de mal comprendre le comportement du CSS :after pseudo-élément? La documentation semble impliquer qu'elle ajoute le contenu spécifié après l'élément spécifié, plutôt que de l'ajouter à l'intérieur du conteneur de l'élément. Des idées?

htmlcsscss-selectorspseudo-element
38
Dylan Beattie

Normalement, vous codez ces menus comme des listes ordonnées, il est donc logique de faire quelque chose comme ceci à la place:

#breadcrumb-trail ol { 
    list-style: none; 
    margin: 0;
    padding: 0; 
}

#breadcrumb-trail li { 
    display: inline; 
}

#breadcrumb-trail li:after { 
    content: ' » '; 
}

#breadcrumb-trail li:last-child:after { 
    content: none; 
}
<nav id="breadcrumb-trail">
    <h1>My Amazing Breadcrumb Menu</h1>
    <ol>
        <li><a href="">about</a></li>
        <li><a href="">fos</a></li>
    </ol>
</nav>
31
kapa

Le spec dit:

Comme leurs noms l'indiquent, les pseudo-éléments: avant et: après spécifient l'emplacement du contenu avant et après le contenu de l'arborescence de documents d'un élément.

Notez la phrase clé à la fin de cette phrase, qui fait référence au contenu interne (ou au texte interne). Ainsi, les pseudo-éléments sont insérés au début de la fin dedans le contenu des éléments spécifiés . Par conséquent, la citation double angle droite est insérée après le texte de vos hyperliens, plutôt que après les hyperliens .

Voici une représentation visuelle de l'arborescence de l'élément DOM pour un tel lien avec les deux pseudo-éléments:

a
  a:before
  content
  a:after

Je suppose qu'une solution de contournement à ce comportement consiste à encapsuler chaque lien dans un span puis à appliquer des styles à nav#breadcrumb-trail span:after, mais cela se traduirait par un balisage inutile ... qui vaut le coup à tous égards.

33
BoltClock

Compte tenu de la flexibilité et génialité de CSS, il semble à peu près faisable. J'ai essayé cela dans Chrome, FF et IE et il fait le travail comme prévu, sans avoir besoin d'ajouter du balisage supplémentaire:

#box {
  width: 100px;
  height: 100px;
  background: #eee;
  position: relative;
}

#box:after {
  content: '...appended text outside box';
  position: absolute;
  margin-left: 100%;
  left: 0;
  width: 200px;
}
<div id="box">
  Some Box
</div>

Petite mise en garde: les éléments positionnés de manière absolue sont inclus dans les dimensions des boîtes, par conséquent les éléments flottants ou alignés à côté de lui ne peuvent pas respecter dynamiquement la largeur du contenu des pseudo-éléments.

3
Philzen