The functions and usage of :after and :before in css

This chapter will introduce to you the functions and usage of :after and :before in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. The main function of :before and :after is to add specified content before and after the element content. Example:

HTML code:

<p>你好</p>

CSS code:

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

The effect is as shown:

The above code is the basic usage of :before and :after, but there are many more pseudo-classes of these two types More convenient usage.

2. : clear float after after

After an element is set to float, the layout of its parent element and its sibling elements will be affected, such as the background border of the parent element It cannot be displayed normally, the position and layout of the parent element's sibling elements are wrong, etc.

In order to avoid the impact of this kind of floating, the floating must be cleared. :after is one of the methods.

CSS code:

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

3. :before and :after are used to write small triangles

In daily work, we often encounter small triangles Small icons such as triangles can be implemented by adding pictures, but it is more convenient to use the :after :before pseudo-class.

HTML code:

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

CSS code:

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

The effect is as shown in the picture:

That’s it Isn’t it very convenient to add a small triangle behind the text?

4. Use :after and :before to write a dialog box

HTML code:

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

CSS code:

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

The effect is as shown in the picture:

#The above dialog box is written in imitation of WeChat style. It is very convenient to use :before and :after to write.

5. Write a dialog box with a border below. A dialog box will use both: before and :after

HTML code remains unchanged

CSS code:

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

The effect is as shown in the figure:

(When writing a dialog box with a border, a triangle needs to use both: before and: after)

The above is the detailed content of The functions and usage of :after and :before in css. For more information, please follow other related articles on the PHP Chinese website!