Analyse sur l'utilisation des pseudo-éléments before et :after en CSS

Cet article présente principalement l'utilisation détaillée des pseudo-éléments before et :after en CSS, y compris l'utilisation d'opérations d'insertion pour certains contenus non textuels. Les amis dans le besoin peuvent s'y référer

Si vous en avez. J'ai prêté une attention particulière Sur divers blogs de conception Web, vous avez peut-être remarqué que les pseudo-éléments :before et :after ont attiré beaucoup d'attention dans le développement front-end. Surtout dans le blog de Nicolas Gallagher, de nombreux éléments de pseudo-classe ont été utilisés plus tard.

Nicolas Gallagher a utilisé des pseudo-éléments pour créer 84 icônes GUI avec des balises HTML statiques.

Pour compléter ce qui précède (et capitaliser sur les tendances actuelles), j'ai rassemblé quelques éléments qui fonctionnent entièrement sous des pseudo-éléments. Cet article s'adresse principalement à ce groupe de personnes, c'est-à-dire qu'ils ont vu des choses sympas réalisées avec des pseudo-éléments, mais veulent tout savoir sur l'utilisation d'avant dans la technologie CSS.

Bien que la spécification CSS contienne d'autres pseudo-éléments, nous nous concentrons sur :before et :after. Ainsi, par souci de simplicité, lorsque je dis « pseudo-éléments », je fais référence à ces deux pseudo-éléments particuliers en général.
Que peuvent faire les pseudo-éléments ?

"Pseudo éléments", comme son nom l'indique. Il crée un faux élément et l'insère avant ou après le contenu de l'élément cible.

Le mot « pseudo » est la traduction anglaise du grec, et sa signification fondamentale est « mentir, malhonnête, faux ». Le nom pseudo-élément est donc approprié. Parce que dans la documentation, cela ne change rien. Au lieu de cela, ce sont des éléments fantômes insérés dans CSS qui sont visibles par l'utilisateur et peuvent être contrôlés via CSS.
Syntaxe de base

:before et :after le codage des pseudo-éléments est très simple (comme la plupart des propriétés CSS, il ne nécessite pas beaucoup de préfixes). Voici un exemple simple.

#example:before {   
  content: "#";   
}   
#example:after {   
  content: ".";   
}

Deux choses sont mentionnées dans cet exemple. Premièrement, nous utilisons #example:before et #example:after pour cibler le même élément à proprement parler, ce sont des pseudo-éléments dans le code.

Deuxièmement, comme mentionné dans le module de contenu, les pseudo-éléments sont inutiles si l'attribut "content" n'est pas défini.

Dans cet exemple, l'élément avec l'attribut id aura un symbole dièse placé avant le contenu, et un point après le contenu.
Notes de syntaxe

Vous pouvez définir la valeur de l'attribut de contenu sur vide et simplement la traiter comme une boîte avec peu de contenu. Comme ceci :

#example:before {   
  content: "";   
  display: block;   
  width: 100px;   
  height: 100px;   
}

Cependant, vous ne pouvez pas supprimer complètement l'attribut content. Si vous le faites, le pseudo-élément ne fonctionnera pas. Au minimum, la propriété content nécessite une référence nulle comme valeur (c'est-à-dire :content:"").

Vous remarquerez peut-être que vous pouvez également écrire des pseudo-éléments en utilisant deux deux-points (::before et ::after), dont j'ai déjà parlé. L'explication courte est qu'il n'y a pas de différence entre les deux syntaxes, la seule différence est que le pseudo-élément (double deux-points), la pseudo-classe en CSS3 est (simple deux-points)

Enfin, en termes de syntaxe. Techniquement, vous pouvez appliquer des pseudo-éléments de manière générale, plutôt que sur des éléments spécifiques, comme ceci :

:before {   
  content: "#";   
}

Bien que ce qui précède fonctionne, c'est plutôt inutile. Le code insère un symbole de hachage avant le contenu de chaque élément du DOM. Même si vous supprimez la balise et tout son contenu, vous verrez toujours deux symboles de hachage sur la page : un dans la balise et un autre dans la balise créer.
Caractéristiques du contenu inséré

Comme mentionné précédemment, le contenu inséré n'est pas visible dans le code source de la page. Visible uniquement en CSS

De plus, les éléments insérés sont des éléments en ligne par défaut (ou, en HTML5, dans la catégorie de la sémantique textuelle). Par conséquent, afin de donner à un élément inséré la hauteur, le remplissage, les marges, etc., vous devez généralement le définir explicitement comme un élément de niveau bloc.

Ce sera une brève explication de la façon de concevoir des pseudo-éléments, regardez cette image de mon éditeur de texte ci-dessous

Dans cet exemple, j'ai mis en évidence le style sera appliqué à l’élément inséré avant et après le contenu de l’élément cible.

Notez également que les règles d'héritage CSS typiques s'appliquent aux éléments insérés. Par exemple, si les familles de polices Helvetica, Arial et Sans Serif sont appliquées à l'élément body, le pseudo-élément héritera de ces familles de polices comme n'importe quel autre élément.

De même, les pseudo-éléments n'hériteront pas de styles qui ne sont pas naturellement hérités de l'élément parent (comme le remplissage et les marges).
Qu’y a-t-il avant ou après ?

Votre intuition est que les pseudo-éléments :before et :after peuvent être injectés avant ou après que le contenu inséré soit injecté dans l'élément cible. Mais comme mentionné ci-dessus, ce n’est pas le cas.

Le contenu injecté sera un enfant de l'élément cible associé, mais il sera placé "avant" ou "après" tout contenu de cet élément.

Pour démontrer cela, jetez un œil au code ci-dessous. Tout d'abord, dans le HTML :

<p class="box">Other content.</p>

ci-dessous se trouve le css pour insérer le pseudo élément :

p.box {   
  width: 300px;   
  border: solid 1px white;   
  padding: 20px;   
}   
p.box:before {   
  content: "#";   
  border: solid 1px white;   
  padding: 2px;   
  margin: 0 10px 0 0;   
}

在此html里，你所看的一段文字带有的是一个类的box，还有这样的文字“Other content”在里面（像你所会看到的一样，如果你看见了首页的源代码）。在css中，这段内容被设置了宽度，以及一些padding和可见的边框

然后我们有了伪元素。在这个例子中，它是一个散列符号插入到该段内容之前。随后css给了它一个边框以及一些padding和margins。

这里是浏览器中查看的结果：

外面的盒子是这个段落。围绕有散列符号的边框表示伪元素的边界。所以，不是插入“before”到段落，而是伪元素被置于到此段落的“Other content”的前面。
插入非文本内容

我简要的提醒，你可以把属性的值置为空字符串或是插入文本内容。你基本上有属性的值要包含什么的两个额外的选择

首先，你可以包含一个指向一个图像的URL，就像在css里包含一个背景图像一样做你能做的

p:before {   
  content: url(image.jpg);   
}

注意不能使用引号。如果你将URL用引号括起来，那么它会变成一个字符串和插入文本“url(image.jpg)”作为其内容，插入的而不是图像本身。

当然，你可以包含一个Data URI代替图像引用，正如你可以用css背景一样。

你还可以选择ATRR(X)中的函数的形式。此功能，根据规范?，“把X属性的值以字符串的形式返回”

下面是一个例子：

a:after {   
  content: attr(href);   
}

attr（）函数的功能是什么？它得到特定属性的值并把它作为插入的文本成为一个伪元素。

上面的代码会导致页面上的每一个元素的href值立即被放置在每个各自的元素的后面。在文档被打印时，它可以用作一个包含所有URl的打印样式表。

两种css外部文件的引用方式

À propos du code pour remplacer les ellipses lorsque le texte CSS dépasse div ou span

Comment aligner les icônes CSS avec le texte

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!