Detailed explanation of common usage of pseudo-classes before and after in CSS3

The before/after pseudo-class is equivalent to inserting two additional tags inside an element. Its most suitable and recommended application is graphic generation. In some sophisticated UI implementations, HTML code can be simplified to improve readability and maintainability. These two pseudo-class applications are quite popular and prosperous abroad, but it seems that our front-end developers generally lack the awareness of using these two pseudo-classes. If they want to use them, the most they do is to follow the trend of "clear floating" application.

1. Basic usage

The function of :before and :after is to insert an inline element containing the content specified by the content attribute before or after the specified element content (not the element itself). The most basic usage is as follows:

#example:before {
    content: "#";
    color: red;
}
 
#example:after {
    content: "$";
    color: red;
}

Both pseudo-classes belong to inline elements, but they can be converted into block elements using the display:block attribute. The more common usage is to implement some styles and clear the floating effect. .

2. Style modification

The code is as follows:

<div class="quote">
    <span>Small apartment</span>
</div>
.quote:before,.quote:after{//Use these two pseudo-classes to implement style rendering content:"";
     display:inline-block;
     width:5%;
     margin:5px 1%;
     border-bottom:1px solid blue;
}

The effect is shown in the following figure:

3. Clear floats

The code looks like this:

<div class="parent">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
<div class="parent2">parent2</div>
//css code.box1{
     width:300px;
     height:200px;
     background-color: lightgray;
     float:left;
}
.box2{
     width:300px;
     height:100px;
     background-color: lightblue;
     float:left;
}
.parent2{
     width:400px;
     height: 400px;
     background-color:blue;
     color:#fff;
     text-align:center;
     line-height:400px;
     font-size:30px;
}

Because of the floating problem, the implementation effect is as follows:

If you add this code to the above code to clear the float, you will achieve a different effect:

.parent:after{
     content:"";
     display:block; //Set to block element clear:both; //Use this property to clear floats}

The effect achieved is shown in the figure below:

This is the end of this article about the common uses of the before and after pseudo-classes in CSS3. For more relevant CSS3 pseudo-classes before and after, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!