Table of Contents
1. You can add styles to ordinary elements just like ordinary elements.
2. Insert text into elements
3. Insert the image into the element
4. Insert consecutive project numbers
Home Web Front-end HTML Tutorial Usage tutorial of pseudo elements::before and ::after

Usage tutorial of pseudo elements::before and ::after

Jun 26, 2017 am 11:53 AM
after before element usage

The two pseudo elements::before and ::after are actually content in CSS3. However, they are already present in CSS2, but in CSS2 they are represented by a colon in front (: before and :after). Today I will mainly talk about how to use these two pseudo elements.

1. You can add styles to ordinary elements just like ordinary elements.

For example, if I want to add an icon in front of text, if I write it with ordinary elements, I can write like this:

/*CSS*/.del{ font-size: 20px;}.del i{ display: inline-block; width: 20px; height: 25px; margin-right: 2px; vertical-align: middle; background: url("imgs/delete.png") no-repeat center; background-size: 100%;}.del span{ vertical-align: middle;}
Copy after login
/*HTML*/
<div class="del"><i></i><span>删除</span></div>
Copy after login

But it always feels uncomfortable to put an empty i tag, so just remove it!

/*CSS*/.del{ font-size: 20px;}.del::before{ content: ""; display: inline-block; width: 20px; height: 25px; margin-right: 2px; vertical-align: middle; background: url("imgs/delete.png") no-repeat center; background-size: 100%;}.del span{ vertical-align: middle;}
Copy after login
/*HTML*/
<div class="del"><span>删除</span></div>
Copy after login

Here we directly use the ::before pseudo-element to replace the empty i tag. The two have the same effect:

Similarly, we can use this Use the ::after pseudo-element to solve the classic problem of clearing floats:

.clearfix::after{ display:block; clear:both; content:""; overflow:hidden; height:0; }
Copy after login

Of course, if your website still needs to be compatible with IE8, then use :after, ::after is not compatible.

2. Insert text into elements

Sometimes I may need to add the same text to many elements at the same time, so you can consider using these two pseudo-elements. For example:

/*CSS*/.up:after{ content: &#39;↑&#39;; color: #f00;}.down:after{ content: &#39;↓&#39;; color: #0f0;}
Copy after login
/*HTML*/
<p class="up">上升</p>
<p class="down">下降</p>
Copy after login

The effect is as follows:

3. Insert the image into the element

Achieve something similar to the first example in this article To add text effects to pictures, you can also use pseudo elements to directly insert pictures without using a background image, like this:

/*CSS*/.del{ font-size: 20px;}.del::before{ content: url("imgs/delete.png"); display: inline-block; margin-right: 2px; vertical-align: middle; }.del span{ vertical-align: middle;}
Copy after login

However, it is important to note that pictures inserted in this way cannot be controlled by pseudo elements. To change the size of the image based on the size of the element, you can only introduce a fixed-size image (this is a bit confusing...), so I personally think it is better to use a practical background image.

4. Insert consecutive project numbers

Maybe you will say, isn’t it easy to add consecutive project numbers? Just use the ordered list directly!

Yes, it can indeed be achieved, just like this:

<p>我的爱好:</p><ol><li>吃饭</li><li>睡觉</li><li>打豆豆</li></ol>
Copy after login

This is the effect under Chrome:


Look It looks fine, no problem. What if I want to bold the serial number in front? I'm confused...

Now you say, can't I just manually add labels and numbers before each text, and then add styles to the labels?

/*CSS*/ul li{ list-style: none;}ul li span{ font-weight: bold;}
Copy after login
/*HTML*/<p>我的爱好:</p><ul><li><span>1.</span>吃饭</li><li><span>2.</span>睡觉</li><li><span>3.</span>打豆豆</li></ul>
Copy after login

Yes, there are three items now. What if there are thirty items or three hundred items? Add them one by one? (Very silly and naive...)

If you use pure CSS at this time, you have to use pseudo elements:

/*CSS*/ul li{ list-style: none; counter-increment: number;}   //number相当于是个变量,随便取名就好,在伪元素中调用ul li::before{ content: counter(number)"."; font-weight: bold;}  //注意这里不同于JS,counter(number)与"."之间不需要加任何东西,直接连接就好
Copy after login
/*HTML*/<p>我的爱好:</p><ul><li>吃饭</li><li>睡觉</li><li>打豆豆</li></ul>
Copy after login

The effect is as follows:

So if I don’t want Arabic numerals, can I just use Chinese numerals?

Can! Pseudo elements are nice and powerful!

ul li{ list-style: none; counter-increment: number;}  
ul li::before{ content: counter(number,cjk-ideographic)"、"; font-weight: bold;}
Copy after login

The effect is as follows:

In addition to thiscjk-ideographic, you can also use more list-style-type in CSS Attributes: (Paste directly to the table in w3cshool)


The above is the detailed content of Usage tutorial of pseudo elements::before and ::after. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Analyze the usage and classification of JSP comments Analyze the usage and classification of JSP comments Feb 01, 2024 am 08:01 AM

Classification and Usage Analysis of JSP Comments JSP comments are divided into two types: single-line comments: ending with, only a single line of code can be commented. Multi-line comments: starting with /* and ending with */, you can comment multiple lines of code. Single-line comment example Multi-line comment example/**This is a multi-line comment*Can comment on multiple lines of code*/Usage of JSP comments JSP comments can be used to comment JSP code to make it easier to read

Usage of WPSdatedif function Usage of WPSdatedif function Feb 20, 2024 pm 10:27 PM

WPS is a commonly used office software suite, and the WPS table function is widely used for data processing and calculations. In the WPS table, there is a very useful function, the DATEDIF function, which is used to calculate the time difference between two dates. The DATEDIF function is the abbreviation of the English word DateDifference. Its syntax is as follows: DATEDIF(start_date,end_date,unit) where start_date represents the starting date.

How to correctly use the exit function in C language How to correctly use the exit function in C language Feb 18, 2024 pm 03:40 PM

How to use the exit function in C language requires specific code examples. In C language, we often need to terminate the execution of the program early in the program, or exit the program under certain conditions. C language provides the exit() function to implement this function. This article will introduce the usage of exit() function and provide corresponding code examples. The exit() function is a standard library function in C language and is included in the header file. Its function is to terminate the execution of the program, and can take an integer

Detailed explanation and usage introduction of MySQL ISNULL function Detailed explanation and usage introduction of MySQL ISNULL function Mar 01, 2024 pm 05:24 PM

The ISNULL() function in MySQL is a function used to determine whether a specified expression or column is NULL. It returns a Boolean value, 1 if the expression is NULL, 0 otherwise. The ISNULL() function can be used in the SELECT statement or for conditional judgment in the WHERE clause. 1. The basic syntax of the ISNULL() function: ISNULL(expression) where expression is the expression to determine whether it is NULL or

Using the distinct keyword in parsing SQL Using the distinct keyword in parsing SQL Feb 18, 2024 pm 09:21 PM

Detailed explanation of distinct usage in SQL In SQL databases, we often encounter situations where we need to remove duplicate data. At this time, we can use the distinct keyword, which can help us remove duplicate data and make the query results clearer and more accurate. The basic usage of distinct is very simple, just use the distinct keyword in the select statement. For example, the following is a normal select statement: SELECTcolumn_name

Use CSS Transform to transform elements Use CSS Transform to transform elements Feb 24, 2024 am 10:09 AM

Usage of Transform in CSS The Transform property of CSS is a very powerful tool that can perform operations such as translation, rotation, scaling and tilting of HTML elements. It can dramatically change the appearance of elements and make web pages more creative and dynamic. In this article, we will introduce the various uses of Transform in detail and provide specific code examples. 1. Translate (Translate) Translate refers to moving an element a specified distance along the x-axis and y-axis. Its syntax is as follows: tran

How to use Apple shortcuts How to use Apple shortcuts Feb 18, 2024 pm 05:22 PM

How to use Apple shortcut commands With the continuous development of technology, mobile phones have become an indispensable part of people's lives. Among many mobile phone brands, Apple mobile phones have always been loved by users for their stable systems and powerful functions. Among them, the Apple shortcut command function makes users’ mobile phone experience more convenient and efficient. Apple Shortcuts is a feature launched by Apple for iOS12 and later versions. It helps users simplify their mobile phone operations by creating and executing custom commands to achieve more efficient work and

CSS transition effect: how to achieve the sliding effect of elements CSS transition effect: how to achieve the sliding effect of elements Nov 21, 2023 pm 01:16 PM

CSS transition effect: How to achieve the sliding effect of elements Introduction: In web design, the dynamic effect of elements can improve the user experience, among which the sliding effect is a common and popular transition effect. Through the transition property of CSS, we can easily achieve the sliding animation effect of elements. This article will introduce how to use CSS transition properties to achieve the sliding effect of elements, and provide specific code examples to help readers better understand and apply. 1. Introduction to CSS transition attribute transition CSS transition attribute tra

See all articles