First, the CSS pseudo-elements are used to add special effects to certain selectors. We are in the production of Web pages, some special animation effects are inseparable from the CSS pseudo-elements. Of course, there are many CSS pseudo-elements, the pseudo-element control of the content and an element control the same content, but the pseudo-element is not present in the document tree, not the real element, so called pseudo-elements. Let's go through the specific code examples to give you a detailed introduction to CSS: Before and: The use of the after pseudo-class.
1. A section with: Before pseudo-element style HTML code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
H1:before {content:url(/test/img/2.png)}
</style>
</head>
<body>
<h1>This is a big headline</h1>
<p>css before pseudo-element code example</p>
</body>
</html>
2. A piece of HTML code with the :after pseudo-element style is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
H1:after {content:url(/test/img/2.png)}
</style>
</head>
<body>
<h1>This is a big headline</h1>
<p>css :after pseudo-element using code example</p>
</body>
</html>
So, through the examples 1 and 2 above, do we get some conclusions about the use of css before and after pseudo-classes? In fact, just like the Chinese translation of before and after, before... and after.
In css, the use of the :before pseudo-element is to insert new content before the content of the element. As in example 1, we use the :before element to add an image to the front of the h1 headline.
The use of the after pseudo-element is to insert new content after the content of the element. As in example 2, we use the :after element to add an image to the back of the h1 headline.
In fact, before and after pseudo-elements can also be said to be real elements, although pseudo-elements can not be reflected in the document tree, but we can still add any style to them, and the added style can be the same as ordinary page elements!
Then this article about css :before and :after pseudo-element is here, I hope to help everyone. More css knowledge can be watched [css video tutorial] or [css manual]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
