How to use pseudo elements before and after in css

Editor to share with you how to use the pseudo elements before and after in css. I hope you will get something after reading this article. Let's discuss it together.

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.

After reading this article, I believe you have a certain understanding of "how to use before and after in css". If you want to know more about it, please follow the industry information channel. Thank you for your reading!