:after

Part 1: Basics

1. Unlike pseudo-classes such as :active and :hover, they are all pseudo-elements.

2. The :before/:after pseudo-elements were proposed in CSS2. The ::before/::after is the way of writing in CSS3. It is proposed again to use two colons to represent pseudo-elements to distinguish pseudo-classes.

3. They are used after a selector in CSS to add decorative content, because this can achieve semantics. If HTML is used to add some nodes without actual content or auxiliary sample text, they are meaningless.

4. They have a unique attribute content, in which the added content is an inline element by default.

5. The created pseudo-element is above the element it is attached to by default. We can use z-index:-1; to put it below.

6. They are virtual nodes, not real nodes. like:

 div::after{
            content: " ";
            border:thin solid red;
        }

We can see in the browser:

::after is not a real node, but we often see it used on some websites.

6. Elements such as input, img, iframe, etc. cannot contain other elements, so content cannot be inserted through pseudo-elements.

Part II: Application

1. Use as a separator.

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pseudo-element</title>
    <style>
        a{
            color:blue;
            text-decoration: none;
        }
        .log:after{
            content:"|";
            color:red;
        }
    </style>
</head>
<body>
    <a href="" class="log">Login</a><a href="">Register</a>
</body>
</html>

The effect is as follows:

2. Make a triangle

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pseudo-element</title>
    <style>
        a{
            color:blue;
            text-decoration: none;
        }
        .log:before{
            content:" ";
            display: inline-block;
            width: 0;
            height: 0;
            border:10px solid transparent;
            border-left: 10px solid red;
        }
    </style>
</head>
<body>
    <a href="" class="log">Login</a>
</body>
</html>

The effect is as follows:

3. Clear floating (the following content is taken from Zhang Xinxu)

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pseudo-element</title>
    <style>
    .box{padding:10px; background:gray;}
    .fix{*zoom:1;}
    .fix:after{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}
    .l{float:left;}
    </style>
</head>
<body>
    <div class="box fix">
    <img class="l" src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
</div>
</body>
</html>

The effect is as follows:

Note: *zoom:1; is used to clear floats in IE6 (used on the parent element of the float element).

Summarize

The above is the full content of this article. I hope that the content of this article can be of some help to your study or work. If you have any questions, you can leave a message to communicate.

<<: Introduction to JWT Verification Using Nginx and Lua

>>: HTML form component example code