web-dev-qa-db-fra.com

Pourquoi ai-je besoin d'une propriété `content` vide sur un pseudo-élément :: after?

J'ai eu http://jsfiddle.net/8p2Wx/2/ d'une question précédente que j'ai posée et je vois ces lignes:

.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

Si je supprime content:"", cela ruine l'effet et je ne comprends pas pourquoi c'est nécessaire.

Pourquoi est-il nécessaire d'ajouter une variable content vide aux pseudo-éléments :after et :before?

csspseudo-elementcss-content
22
qwertymk

Vous ne pouvez pas styler le contenu généré sans définir ce que ce contenu doit être. Si vous n'avez pas vraiment besoin de contenu, juste d'un «élément invisible» supplémentaire pour le style, vous pouvez le définir sur la chaîne vide (content: '') et simplement le styler.

C’est facile de le confirmer vous-même: http://jsfiddle.net/mathias/YRm5V/

À propos, l'extrait que vous avez posté est le micro hack de clearfix, qui est expliqué ici: http://nicolasgallagher.com/micro-clearfix-hack/

Concernant votre deuxième question, vous aurez besoin de un shiv HTML5 (petit morceau de JavaScript) pour rendre <nav> stylable dans certains navigateurs plus anciens.

23
Mathias Bynens

Comme la spécification CSS. états,: after et: before Les pseudo-éléments ne sont pas générés si prop. content n'est pas défini sur une valeur autre que 'normale' et 'aucune': http://www.w3.org/TR/CSS2/generate.html#content

content La valeur initiale est «normale» et «normal» est calculé sur «aucun» pour les pseudo-éléments: before et: after.

4
luissquall

CSS a une propriété appelée contenu. Il ne peut être utilisé qu'avec les pseudo-éléments: after et: before. Il s’écrit comme un pseudo sélecteur (avec les deux points), mais il s’appelle pseudo-élément car il ne sélectionne en réalité aucun élément de la page mais ajoute quelque chose de nouveau à la page.

voir ceci pour une meilleure explication: 

  1. Css Contenu 1
  2. Css Contenu 2

et l'élément nav est:

L’un des nouveaux éléments de HTML 5 est l’élément qui vous permet de regrouper des liens, d’où un balisage sémantique et une structure supplémentaires qui peuvent aider les lecteurs d’écran. Dans cet article, je vais expliquer comment et où l'utiliser, ainsi que certaines réserves que j'ai avec la définition des spécifications.

  1. Html5 TAGS
0
Jack