Utilisation des pseudo-éléments avant et après en CSS

Cet article vous présente principalement plusieurs scénarios d'utilisation de pseudo-éléments créés par :before et :after en CSS, comme le remplissage de texte, servant de police d'icônes, de ligne de progression, de chronologie et de figures géométriques. J'espère que cela pourra vous aider.

1. Introduction

1.1 Description

: before et :after en CSS créeront un pseudo-élément, où le pseudo-élément créé par : before est le sélectionné one Le premier élément enfant de l'élément, et le pseudo-élément créé par :after est le dernier élément enfant de l'élément sélectionné. Le style par défaut des pseudo-éléments créés par

:before et :after est le style en ligne.

1.2 Syntaxe

/* CSS3 */
selector::before
/* CSS2 */
selector:before

CSS3 a introduit :: (deux deux-points) pour distinguer les pseudo-classes (:un deux-points) et les pseudo-éléments (::deux deux-points).

Pseudo-classe : exploite l'élément lui-même, comme :hover, :first-child, :focus, etc.

Pseudo élément : exploite les sous-éléments de l'élément, tels que ::before, ::after, ::content, etc.

Supporte uniquement :(un deux-points) dans IE8, donc afin d'être compatible avec ces navigateurs, vous pouvez également utiliser :before et :after.

1.3 Attribut content

L'attribut content représente le contenu rempli par le pseudo élément.

Exemple

CSS :

.test-p {
    width: 100px;
    height: 100px;
    margin-left: 20px;
    background-color: #eee;
}
.test-p::before {
    content: "♥";
    color: red;
}
.test-p::after {
    content: "♥";
    color: blue;
}

Page HTML :

Effet :

1.4 Éléments remplaçables

Élément remplacé : Sa présentation n'est pas contrôlée par CSS. Ces éléments sont des objets dont l'apparence est rendue indépendamment du CSS.

Les éléments remplaçables typiques incluent