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>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]

Related Article

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.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.