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

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 !

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

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.

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

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

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

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

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

Copier après la connexion

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.

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

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

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

Copier après la connexion

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

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

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

Copier après la connexion

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.

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

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

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

Copier après la connexion

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;
}复制代码

Copier après la connexion

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

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

Ajouter des parenthèses

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

<h1>给标题加括号</h1>

Copier après la connexion

Ajouter des guillemets

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

<h2>给标题加引号</h2>

Copier après la connexion

Non spécifié, par défaut

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

<h3>不设置quotes</h3>

Copier après la connexion

Titre de la décoration

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

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: &#39;&#39;;
    border-top: 6px double;
}

<h1>标题</h1>

Copier après la connexion

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

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

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

h1::before, h1::after {
    content: &#39;&#39;;
    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>标题</h1>

Copier après la connexion

obtenez des ombres plus réalistes

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

.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>

Copier après la connexion

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 :

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

Après avoir ajouté la classe de remplacement

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

Copier après la connexion

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

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

清除浮动

方式一：

.classic-clearfix::after {
    content: &#39;&#39;;
    display: block;
    clear: both;
}

Copier après la connexion

方式二：

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

Copier après la connexion

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

模拟float:center的效果

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

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

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

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="img/cat.jpg" 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>

Copier après la connexion

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