Maison > Article > interface Web > Comment utiliser les sélecteurs après et avant ? Explication détaillée des sélecteurs après et avant

Comment utiliser les sélecteurs après et avant ? Explication détaillée des sélecteurs après et avant

云罗郡主avant: 2018-11-21 17:23:174426parcourir

Le contenu de cet article explique comment utiliser les sélecteurs après et avant ? L'explication détaillée des sélecteurs après et avant a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'elle vous sera utile.

En CSS3, nous pouvons utiliser les sélecteurs ::before et ::after pour ajouter du contenu avant ou après l'élément. Ces deux sélecteurs sont souvent utilisés conjointement avec « l'attribut de contenu ». Les scénarios les plus couramment utilisés consistent à effacer les flottants et à créer de petites icônes.

Le code est le suivant :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>CSS3 ::before和::after选择器</title>
    <style type="text/css">
        div::before
        {
            content:"php中文网";
        }
    </style>
</head>
<body>
    <div>CSS3教程</div>
</body>
</html>

Comme indiqué sur l'image :

Comment utiliser les sélecteurs après et avant ? Explication détaillée des sélecteurs après et avant

Analyse :

::before et ::after Ces deux sélecteurs fonctionnent avec l'attribut content pour insérer du contenu, des images, du multimédia, etc. avant ou après l'élément. Ces deux sélecteurs sont très utiles et peuvent même être utilisés pour concevoir diverses petites icônes :

Comment utiliser les sélecteurs après et avant ? Explication détaillée des sélecteurs après et avant

Ce qui précède explique comment utiliser les sélecteurs après et avant ? Une introduction complète à l'explication détaillée des sélecteurs après et avant. Si vous souhaitez en savoir plus sur le Tutoriel CSS3, veuillez faire attention au site Web PHP chinois.

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Explication détaillée de l'utilisation des sélecteurs en lecture-écriture et en lecture seuleArticle suivant：Explication détaillée de l'utilisation des sélecteurs en lecture-écriture et en lecture seule

Articles Liés

Voir plus