Explication détaillée des pseudo-éléments en CSS::before et ::after

Cet article vous fera découvrir les pseudo-éléments ::before et ::after en CSS et verra leurs applications. J'espère qu'il vous sera utile !

Cet article part du plus simple et explique comment comprendre et utiliser ::avant et ::après. Appliquez-le ensuite dans des scénarios d’utilisation réels.

Que sont ::before et ::after ?

::before et ::after sont des mots-clés qui peuvent être ajoutés aux sélecteurs pour créer des pseudo-éléments. Les pseudo-éléments sont insérés avant ou après le contenu de l'élément correspondant au sélecteur.

attribut content

1) Le contenu unique sous ::before et ::after est utilisé pour ajouter du contenu à la tête ou à la queue logique de l'élément dans le rendu CSS.

2) ::before et ::after doivent être utilisés avec l'attribut content. Content sert à définir le contenu inséré. Le contenu doit avoir une valeur, au moins vide

3) Ces ajouts n'apparaîtront pas dans le DOM et. ne changera pas Le contenu du document ne peut pas être copié, il est uniquement ajouté dans la couche de rendu CSS. N'utilisez donc pas :before ou :after pour afficher du contenu significatif, essayez de les utiliser pour afficher du contenu décoratif

le contenu peut prendre les valeurs suivantes :

string

Utilisez des guillemets pour envelopper une chaîne, qui sera ajoutée au contenu de l'élément String

 p::before{
    content: "《";
    color: #000000;
}
p::after{
    content: "》";
    color:#000000;
}

<p>JavaScript高级程序设计</p>

attr()

appelle les attributs de l'élément actuel via attr(), comme l'affichage du texte alternatif de l'image ou l'adresse href du lien.

a::after {
    content: ' → ' attr(href); /* 在 href 前显示一个箭头 */
}

 <a href="https://www.baidu.com/">百度地址</a>

 a::after{
    content: "【" attr(href) "】";
}

<a href="https://www.baidu.com/">百度地址</a>

url()/uri()

est utilisé pour référencer des fichiers multimédias. Par exemple : "Baidu" donne une image au recto et l'attribut href au verso.

a::before{
    content: url("img/baidu_jgylogo3.gif");
}
a::after{
    content:"("attr(href)")";
}

<a href="https://www.baidu.com/">百度地址</a>

Note

1) Les URL ne peuvent pas utiliser de guillemets. Si vous mettez l'URL entre guillemets, elle devient une chaîne et insère le texte "url(image.jpg)" comme contenu, au lieu de l'image elle-même.

2) Attribut de contenu, utilisez l'image directement. Même si vous écrivez la largeur et la hauteur, la taille de l'image ne peut pas être modifiée

Solution : Si vous souhaitez résoudre ce problème, vous pouvez écrire le contenu :'' comme vide et utilisez background:url() Ajoutez des images

/*伪元素添加图片：*/
.wrap:after{
    /*内容置为空*/
    content:"";
    /*设置背景图，并拉伸*/
    background:url("img/0Explication détaillée des pseudo-éléments en CSS::before et ::after") no-repeat center;
    /*必须设置此伪元素display*/
    display:inline-block;
    /*必须设置此伪元素大小（不会被图片撑开）*/
    background-size:100%;
    width:100px;
    height:100px;
}复制代码

3) Les pseudo-éléments ne prennent pas effet du côté Apple, img, input et autres balises simples n'ont pas de pseudo-éléments :after et :before (non disponibles dans certains navigateurs). , tels que : Apple les trouvera invalides), car une seule balise elle-même ne peut pas avoir d'éléments enfants.

Solution : Enveloppez un div dans l'img pour résoudre le problème

4) Si vous souhaitez modifier dynamiquement l'image du pseudo-élément, vous pouvez ajouter le style de base de l'image du pseudo-élément à l'élément actuel, et utilisez ensuite la classe dynamique pour écrire l'image du pseudo-élément.

::avant et ::après l'application

Utiliser avec l'attribut guillemets

Ajouter des parenthèses

 h1{
    quotes:"(" ")";  /*利用元素的quotes属性指定文字符号*/
}
h1::before{
    content:open-quote;
}
h1::after{
    content:close-quote;
}

<h1 id="给标题加括号">给标题加括号</h1>

Ajouter des guillemets

 h2{
    quotes:"\"" "\"";  /*添加双引号要转义*/
}
h2::before{
    content:open-quote;
}
h2::after{
    content:close-quote;
}

<h2 id="给标题加引号">给标题加引号</h2>

Non spécifié, par défaut

 h3::before{
    content:open-quote;
}
h3::after{
    content:close-quote;
}

<h3 id="不设置quotes">不设置quotes</h3>

Titre de la décoration

h1 {
    display: grid;
    grid-template-columns: minmax(50px, 1fr) auto minmax(50px, 1fr);
    align-items: center;
    text-align: center;
    gap: 40px;
}

h1::before, h1::after {
    content: '';
    border-top: 6px double;
}

<h1 id="标题">标题</h1>

La mise en page est réalisée en transformant l'élément <h1> en 3 colonnes. La colonne de gauche et la colonne de droite sont des lignes doubles d'une largeur de minmax(50px, 1fr), ce qui signifie que leur largeur correspondante n'est toujours pas inférieure à 50px. Le texte du titre est parfaitement centré.

Titre du ruban

 h1 {
    position: relative;
    margin: 0 auto 20px;
    padding: 10px 40px;
    text-align: center;
    background-color: #875e46;
}

h1::before, h1::after {
    content: '';
    width: 80px;
    height: 100%;
    background-color: #724b34;

    /* 定位彩带两端形状的位置，并且放在最底层 */
    position: absolute;
    z-index: -1;
    top: 20px;

    /* 彩带两端的形状 */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 25% 50%);

    /* 绘制并定位彩带的阴影三角形 */
    background-image: linear-gradient(45deg, transparent 50%, #5d3922 50%);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: bottom right;
}

h1::before {
    left: -60px;
}

h1::after {
    right: -60px;
    transform: scaleX(-1); /* 水平翻转 */
}
---------------------------
 <h1 id="标题">标题</h1>

obtenez des ombres plus réalistes

.box{margin:10px;width:300px;height:100px;border-radius:10px;background:#ccc}
.shadow{position:relative;max-width:270px;box-shadow:0 1px 4px rgba(0,0,0,.3),0 0 20px rgba(0,0,0,.1) inset}
.shadow::after,.shadow::before{position:absolute;z-index:-1;content:""}
.shadow::after,.shadow::before{position:absolute;bottom:15px;left:10px;z-index:-1;width:50%;height:20%;content:""}
.shadow::after,.shadow::before{position:absolute;bottom:15px;left:10px;z-index:-1;width:50%;height:20%;box-shadow:0 15px 10px rgba(0,0,0,.7);content:"";transform:rotate(-3deg)}
.shadow::after{right:10px;left:auto;transform:rotate(3deg)}


<div class="box shadow"></div>

Contenu de remplacement

Dans certains cas, le contenu n'a pas besoin d'être utilisé ::avant ou : après. Si le contenu est défini sur une seule image, vous pouvez l'utiliser directement sur un élément pour remplacer le contenu HTML de cet élément.

Par exemple, il y a les trois contenus suivants sur la page :

Après avoir ajouté la classe de remplacement

.replace {
    content: url(img/replace.png);
}

1)具有简单文本的元素。它会被取代。
2)一个包含<img src="/static/imghw/default1.png" data-src="img/cat.jpg" class="lazy" alt="Explication détaillée des pseudo-éléments en CSS::before et ::after" >在其中的元素。它也会被取代。
3)<img src="/static/imghw/default1.png" data-src="img/cat.jpg" class="lazy" alt="Explication détaillée des pseudo-éléments en CSS::before et ::after" >直接一个元素。Firefox不会取代它，但其他浏览器会。

清除浮动

方式一：

.classic-clearfix::after {
    content: '';
    display: block;
    clear: both;
}

方式二：

.modern-clearfix {
    display: flow-root;
}

模拟float:center的效果

float没有center这个取值，但是可以通过伪类来模拟实现。

原理：左右通过::before float各自留出一半图片的位置，再把图片绝对定位上去。

body { font: 14px/1.8 Georgia, serif;}
#page-wrap { width: 60%; margin: 40px auto; position: relative; }
#logo { position: absolute; top: 0; left: 50%; margin-left: -125px; }
#l, #r { width: 49%; }
#l { float: left; }
#r { float: right; }
#l:before, #r:before { content: ""; width: 125px; height: 250px; }
#l:before { float: right; }
#r:before { float: left; }

<div id="page-wrap">
    <img  src="/static/imghw/default1.png"  data-src="img/cat.jpg"  class="lazy"   id="logo" alt="Explication détaillée des pseudo-éléments en CSS::before et ::after" >
    <div id="l">
        <p>
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
        </p>
    </div>
    <div id="r">
        <p>
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
        </p>
    </div>
</div>

引用参考:

W3C官方文档

Diving into the ::before and ::after Pseudo-Elements

Faking ‘float: center’ with Pseudo Elements

原文地址：https://juejin.cn/post/6986629782666477599

作者：Axjy

相关推荐：《css视频教程》！

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!