CSS before after what do you mean? "An explanation of usage"

Source: Internet
Author: User
This article will give you a detailed description of the pseudo-elements in CSS: Before and: After the specific use of the method. Some novice small white may at first glance, think is a familiar word, but appear in CSS is a bit confused. We all know that the CSS feature is very powerful. It is because of the function of CSS to make Web pages so colorful.

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 > Here is a big headline </h1><p>css before pseudo-elements using code examples </p></body></html>

Then the above code effect is as follows:


2. A section with: after pseudo-element style HTML code 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> Here is a big headline </h1><p>css:after pseudo elements using code example </p></body></html>

Code effects such as:


So do we get some conclusions about how CSS before and after pseudo-classes are used in the examples above, 1 and 2? In fact, as before and after the Chinese translation of the same, in ... Before and in ... After.

In CSS, the before pseudo-element is used to insert new content before the contents of the element, as in Example 1, we use: The Before element adds a picture to the front of the H1 title.

And: The use of the after pseudo-element is to insert new content after the element's content, as in Example 2, we used the following element to add a picture to H1 after the headline.

In fact, before and after pseudo-elements can also be said to be true elements, although pseudo-elements cannot be reflected in the document tree, but we can still give them any style, and the added style can be the same as the normal page elements!

Then this article about Css:before and: After the pseudo-elements of the introduction to here, I hope to be helpful to everyone. More CSS knowledge to watch "CSS video tutorials" or "CSS manuals"

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: