: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

Deployment and Chinese translation of the docker visualization tool Portainer

Deep understanding of the use of ::before/:before and ::after/:after

Deployment and Chinese translation of the docker visualization tool Portainer

A brief discussion on the Linux kernel's support for floating-point operations

Detailed explanation of tcpdump command examples in Linux

A practical record of encountering XSS attack in a VUE project

Docker image compression and optimization operations

Detailed explanation of the process of setting up nvidia-docker environment on Linux server

Use Navicate to connect to MySQL on Alibaba Cloud Server

Solution to the problem that the vertical centering of flex inside button is not centered

Implementing image fragmentation loading function based on HTML code

Solution to the problem of being unable to access the Internet after Ubuntu restarts in VMWare

Recommend

Ubuntu 20.04 Chinese input method installation steps

Ten Experiences in Presenting Chinese Web Content

Nginx tp3.2.3 404 problem solution

MySQL FAQ series: When to use temporary tables

A brief discussion on Linux signal mechanism

Docker uses Supervisor to manage process operations

Win2008 R2 mysql 5.5 zip format mysql installation and configuration

How to Delete Junk Files in Linux Elegantly

MySQL database Shell import_table data import

MySQL 5.7.16 ZIP package installation and configuration tutorial

Detailed graphic and text tutorial on downloading, installing and configuring mysql-5.7.28 under Windows

base target="" specifies the target of the base link to open the frame

Docker setting windows storage path operation

【HTML element】How to embed images

Vue.js implements simple folding panel