Pseudo-classes and pseudo-elements in CSS: after

This article mainly introduces the pseudo-class and pseudo-elements in CSS: After, there is a certain reference value, now share to everyone, the need for friends can refer to

CSS in the existence of some special properties, called Pseudo-class, the most common among them is the definition of the pseudo-link: link,:visited,:hover,:active, etc. this article describes in detail the usage of after, interested friends can understand, may be helpful to you

There are some special properties in CSS, called pseudo-classes, the most common among them is the pseudo-definition of links: link,:visited,:hover,:active and so on.
In addition to them, there are some pseudo-classes that are not commonly used: Focus,:first-child,:lang, etc.

And there are not only pseudo-classes in CSS, but also pseudo-elements, such as: First-letter,:first-line,:before and: After.
The other pseudo elements in this article are not table, Nathan: After pseudo-elements.
After the name is the meaning behind the element, the essence is to add content after the element.
This pseudo-element allows the producer to insert the generated content in the last facet of the element's content, and it needs to be used with the content property to set what happens after the object. By default, this pseudo-element is inline, but you can use the property display to change this.
All major browsers support: After pseudo-elements, but for IE, only IE8 and above are supported.

Here's an example of inserting in CSS code :

The code is as follows:

<style type= "Text/css" > H1:after {content:url (logo.gif)} </style>

When displayed, a picture is inserted after the title content. This is the pseudo-element: the role of After.
: The content of after pseudo-class can also be followed by other parameters,
One: String for example:

The code is as follows:

<style type= "Text/css" >. Test:after{content: "Test Code"}; </style> <p class= "test" > Test p:</p> Run results shown as: Test p: Test code

Two: attr (x), attr is the meaning of the attribute, as the name implies, is to read the properties of the class node such as:

The code is as follows:

<style type= "Text/css" >. test:after{content:attr (ID)}; </style> <p class= "test" id= "AAA" > Test P's ID is:</p> run results shown as: Test P ID: AAA

Three: Fixed parameters
Close-quote: Inserting the post tag of the quotes property
No-close-quote: Does not insert the post-tag of the quotes property. But increase its nesting level
Open-quote: Inserting the front tag of the quotes property
No-open-quote: Does not insert the front tag of the quotes property. But reduce its nesting level