What is the use of: before and:: after in css

This article is about the usefulness of:: before and:: after in css. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

:: before,: after are probably the most commonly used pseudo elements, both exist as display:inline-block attributes,:: before is to add content before the original element,:: after is to add content after the original element. At the same time, pseudo elements will also "inherit" the attributes of the original element. If the original text is black, the text of the pseudo element will also be black.

For example, in the following code, there is a div that reads "Hello everyone, I am div". After using:: before,:: after, a paragraph of text is added before and after the original div, and both paragraphs are red.

Div::before {content: "I am before"; color:red;} div::after {content: "I am after"; color:red;}

Thank you for reading! This is the end of the article on "what is the use of css:: before and:: after". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!