Basic knowledge--:before pseudo elements and: after pseudo elements

Http://book.51cto.com/art/201108/285688.htm

3.7 Replacing the specified position

Everyone knows that before and after are meant to be before and after. But strangely, in CSS: before pseudo-elements and: After pseudo-elements are styled for content that does not exist in the source document.

How do I set a style without content? Don't worry! They have a content property that you can use together to set the style for the front and back of a selector.

Here's a look at: before pseudo-elements and: the use of after pseudo-elements.

Video Tutorial: disc/Video/3/3.7 replace the specified location. avi Length: 7 minutes

3.7.1 basic knowledge--:before pseudo elements and: after pseudo elements

: Before is used in conjunction with the content property to set what is displayed before an object (according to the logical structure of the object tree) in the following syntax format:

1. Selector:before {Srules}

For example:

1. Q:before {
2. Content:open-quote;
3. Color:red
4. }

: After is used with the content property, sets the contents to be displayed after the object (according to the logical structure of the object tree), with the following syntax:

1. Selector:after {Srules}

For example:

1. Body:after {
2. Content: "The End";
3. Display:block;
4. Margin-top:2em;
5. Text-align:center;
6. }

As you can see from the statement: Before and: After all need to be used with the content property. The common content parameter names and descriptions are listed in table 3-1.

Table 3-1 Common content parameter tables

Parameter name	Speak clearly
attr (ALT):	Text that uses the ALT attribute
Counter (name)	Using a named counter
Counter (name, List-style-type)	Use a named counter and follow The specified List-style-type property
Counters (name, string)	Use all named counters
Counters (name, string, List-style-type)	Use all named counters and comply with the From the specified List-style-type property
No-close-quote	The post element of the Quotes property is not inserted. But increase its nesting level
No-open-quote	The former element of the quotes property is not inserted. But reduce its nesting level
Close-quote	Insert the post element of the Quotes property
Open-quote	Insert the former element of the quotes property
String	Strings enclosed in quotation marks
Url	Use the specified absolute or relative address

Suppose that there is an HTML page that contains the following code:

1. <style type= "Text/css" >
2. h1:before{content: "title:"; }
3. P{color:blue}
4. </style>
6. <p> where you go, there is no cold, no sorrow. </p>

After the run will find that the "flower is far away" text before the "title:" Text, the effect 3-16 is shown.

Figure 3-16 Example Run effect

Basic knowledge--:before pseudo elements and: after pseudo elements