Les fonctions et l'utilisation de :after et :before en CSS

Ce chapitre vous présentera les fonctions et l'utilisation de :after et :before en CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. La fonction principale de :before et :after est d'ajouter le contenu spécifié avant et après le contenu de l'élément. Exemple :

Code HTML :

<p>你好</p>

Code CSS :

p:before{
   content: 'Hello';
   color: red;
}
p:after{
    content: 'Tom';
    color: red;
}

L'effet est tel que montré dans l'image :

Le code ci-dessus est l'utilisation de base de : before et :after, mais ces deux pseudo Il existe de nombreuses utilisations plus pratiques des classes.

2. ：after clear float

Une fois qu'un élément est défini sur float, la disposition de son élément parent et des éléments frères de l'élément parent sera affectée, comme la bordure d'arrière-plan de l'élément parent Il ne peut pas être affiché normalement, la position des éléments frères de l'élément parent est erronée, etc.

Afin d'éviter l'impact de ce type de flottement, le flottant doit être effacé. :after est l’une des méthodes.

Code CSS :

ul:after{
    content: '';
    display: block;
    width: 0;
    height: 0;
    clear: both;
}

3. :before et :after sont utilisés pour écrire des petits triangles

On les rencontre souvent dans le travail quotidien. De petites icônes telles que des petits triangles peuvent être implémentées en ajoutant des images, mais il est plus pratique d'utiliser la pseudo-classe :after :before.

Code HTML :

<div class="demo">这是一个测试</div>

Code CSS :

.demo:after{
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-left: 8px solid #AFABAB;
    position: relative;
    top: 2px;
    left: 10px;
}

L'effet est comme indiqué sur l'image :

De cette façon, vous pouvez ajouter un petit triangle derrière le texte, n'est-ce pas très pratique ?

4. Utilisez :after et :before pour écrire une boîte de dialogue

Code HTML :

<div class="left">
  <p>吃了吗</p>
</div>
<div class="right">
  <p>吃过了，吃了红烧排骨和酸菜鱼</p>
</div>

Code CSS :

.left,.right{
    min-height: 40px;
    position: relative;
    display: table;
    text-align: center;
    border-radius: 7px;
    background-color: #9EEA6A;
}
.right{      /*使左右的对话框分开*/
    top: 40px;
    left: 60px;
}
.left > p,.right > p{    /*使内容居中*/
    display: table-cell;
    vertical-align: middle;
    padding: 0 10px;
}
.left:before,.right:after{   /*用伪类写出小三角形*/
    content: '';
    display: block;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    position: absolute;
    top: 11px;
}
/*分别给左右两边的小三角形定位*/
.left:before{    
    border-right: 8px solid #9EEA6A;
    left: -16px;
}
.right:after{    
    border-left: 8px solid #9EEA6A;
    right: -16px;
}

L'effet est comme indiqué dans l'image :

La boîte de dialogue ci-dessus est écrit à l'imitation du style WeChat, en utilisant : Avant et :après sont très pratiques à écrire

5 Ensuite, écrivez une boîte de dialogue avec une bordure. Une boîte de dialogue utilisera à la fois :avant et :après.

Code HTML Inchangé

Code CSS :

.left,.right{
    min-height: 40px;
    position: relative;
    display: table;
    text-align: center;
    border-radius: 7px;
    background-color: #9EEA6A;
    border: 1px solid #736262;
}
.right{      /*使左右的对话框分开*/
    top: 40px;
    left: 60px;
}
.left > p,.right > p{    /*使内容居中*/
    display: table-cell;
    vertical-align: middle;
    padding: 0 10px;
}
.left:before,.right:after,.left:after,.right:before{   /*用伪类写出小三角形*/
    content: '';
    display: block;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    position: absolute;
    top: 11px;
}
/*分别给左右两边的小三角形定位*/
.left:before{    
    border-right: 8px solid #9EEA6A;
    left: -16px;
}
.left:after{      /*左边对话框小三角形的边框样式*/
    border-right: 8px solid #736262;
    left: -17px;
    z-index: -1;
}
.right:after{    
    border-left: 8px solid #9EEA6A;
    right: -16px;
}
.right:before{    /*右边对话框小三角形的边框样式*/
    border-left: 8px solid #736262;
    right: -17px;
    z-index: -1;
}

L'effet est tel qu'indiqué sur la figure :

(lors de l'écriture d'une boîte de dialogue avec des bordures, un triangle nécessite à la fois :avant et :après)

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!