How to use pseudo elements before and after in CSS

This article mainly introduces how to use the pseudo elements before and after in CSS. It is very detailed and has a certain reference value. Friends who are interested must finish it!

What are:: before and:: after?

The descriptions of before and after are as follows

Element:: before {content: inserted content;}

Element:: after {content: inserted content;}

Content: enter part of the content to insert

To insert letters and symbols in content, enclose them in "" and enter them.

To insert images and sounds in content, enter url (target path).

You can also specify before and after for the same element.

Pseudo elements such as before and after in CSS3 use:: (double colons), but even with a single colon, it is recognized and works in most browsers.

Supported browsers

Browsers that support:: before and:: after pseudo elements: Chrome, Firefox3.5~, Safari4~, IE8~, Opera6~.

How to use pseudo elements before and after?

Here is a HTML file that applies before and after

(this is an example where the * html and css files are in the same directory and the external stylesheet file name is "sample.css")

HTML

Add a tag before the title

Insert an image before a paragraph

Sample.css

H4::before {

Content: "◆"

}

P::before {

Content:url (img/luffys.jpg)

}

In this example, the symbol "♦" is inserted before the title of

Insert the image file "img/luffys.jpg" before the paragraph of the

It appears on the browser as follows: the title is preceded by "◆" and an image file is inserted in front of the paragraph.

The above is all the content of the article "how to use pseudo elements before and after in CSS". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!