Maison > interface Web > tutoriel CSS > 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

云罗郡主
Libérer: 2018-11-21 17:23:17
avant
4459 Les gens l'ont consulté

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>
Copier après la connexion

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!

Étiquettes associées:
source:lvyestudy.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal