CSS instance tutorial; using: Before and: after inserting content

Article Introduction: we use: Before to insert content in front of the element, using: After the element to insert content (compatible browsers: Firefox, Chrome, Safari, Opera, ie8+).

In CSS, we can use: before pseudo element selector and: After pseudo element selector in the page before and after the content property to insert contents.

Adding these two pseudo element selectors from css2.0 to the css2.1 to the present 3.0 is constantly improving and expanding the two selectors.

First, let's look at how we can insert content in CSS2 (IE6 7 is not considered, because they do not support: before and after).

In Css2, we use: before to insert content before the element, using: After the element is inserted (compatible browsers: Firefox, Chrome, Safari, Opera, ie8+). Take a look at the following example:

CSS style:

		#div1 {
                border:1px
		solid
		#090;
                padding:10px;
                font-size:14px;
                margin-bottom:10px;
            }

            #div1: before{
            	Content: "" ";
				Color: #f00;
				font-family:arial;
            }

            #div1: after{
            	Content: "" ";
				Color: #f00;
				font-family:arial;
            }

HTML code:

<div
		id= "Div1" > Insert content </div>

View demo results in browsers (browsers I've tested: ff3.6/4.0/7.0, Chrome14, Safari5, opera10.6, IE8):

If all the div front and back I have added the red parenthesis in the example above, only the div with "none" will not insert parentheses, which means that the individual element I specified does not insert the content. Let's look at how to implement:

CSS style:

		div {
                border:1px
		solid
		#090;
                padding:10px;
                font-size:14px;
                margin-bottom:10px;
            }

            div:before{
            	content: "" ";
				Color: #f00;
				font-family:arial;
            }

            div:after{
            	content: "" ";
				Color: #f00;
				Font-family:arial
            }
	   . div2:after{
		Content:none;
		/*content:normal;*/
	   }

HTML code:

<div> Insert Content </div>
<div
		class= "Div2" > Insert content </div>

Content:none is used here to implement not inserting content, but it is not supported in opera10.6 and SAFARI5, only ff3.6/4.0/7.0, CHROME14, IE8 support. When the normal keyword is used, only the SAFARI5 is not given force (so it is best to use normal). Take a look at the results (ff3.6/4.0/7.0, CHROME14, IE8):

Safari5 not to force:

In addition to the keyword method above, there is also a way to insert the "" method, which is supported.

Content: "";

Use: Before and: After you can insert a literal symbol, you can also use the Open-quote property of the content property with the Close-quote property value to add symbols such as parentheses, single quotes, and so on both sides of the string. Literally we can see that the Open-quote property value can be inserted before the content, and Close-quote will insert the content at the end.

Take a look at an example:

		h1{
			Quotes: "("
		) ";
		}
		h1:before{
			content:open-quote;
		}
		h1:after{
			content:close-quote;
		}
		h2:before{
			content: "\ \";
		}
		h2:after{
			content: "\ \";
		}

HTML code:

 
Here, the H1 tag uses quotes to add a pair of parentheses to the front and back of the H1, and H2 uses: Before and: After the method inserts a pair of backslashes (of course, you can also insert a pair of parentheses, here using the backslash is to indicate that some characters are to be escaped, such as backslashes). Look at the performance in the browser (ff3.6, Chrome14, opera10.6, Safari5, IE8):
 
 
Quotes also need to use: Before and: After to insert content, really don't know what advantage he has, perhaps can define a lot of words or symbols in quotes, and the content of reference is its advantage.
 
After inserting the text, let's take a look at how to insert the picture.
 
CSS style:
 
		div {
                border:1px
		solid
		#090;
                padding:10px;
                font-size:14px;
                margin-bottom:10px;
            }

            div:first-child:after{
            	Content:url (new.gif);
		margin-left:5px;
            }
 
HTML code:
 
<div> Insert Content </div>
<div> Insert content </div>
<div> Insert content </div>
<div> Insert Content </div>
 
Insert the picture, which is a very very powerful function, for example, I have a news list, the first news I want to add a picture of new or hot pictures, we may have a program to control, but now, front-end workers can be achieved, do not need programmers to write judgments (there is no use of the Li list in the form of , just do it, and write the demo. Take a look at the results of the browsing (ff3.6/4.0/7.0, Chrome14, Safari5, opera10.6):
 
 
IE8 only supports inserting text, and does not support the ability to insert a picture (PS: 8.0 in IETester seems to support, and there is an extra piece of evidence).
 
We can not only insert text, pictures, we can also get the attributes of the element, and then insert it. Let's take a look at the example of getting a DIV element attribute:
 
CSS style:
 
div {
    border:1px
		solid
		#090;
    width:78px;
	height:59px;
	padding:3px;
	position:relative;
}

div:after{
	content:attr (ID);
	Display:block;
	Color: #f00;
	Font-weight:bold;
	Position:absolute;
	top:0;
	right:0;
}
 
HTML code:
 
<div
		id= "test"
		title= "Idtitle"
		style= "width:78px"; > Text Content </div>
 
Here, I get the ID value of the div, and of course I can get the value of Title,style, and look at the performance in the browser (ff3.6/4.0/7.0, Chrome14, Safari5, opera10.6, IE8):
 
 
Take a look at the special example, that is to get the property value of the picture, currently only opera support, this, opera is very power to achieve some effect, it can save a lot of HTML code. Let's see what I have here to achieve (opera10.5):
 
 
By default, as shown on the left, only one picture, when the mouse is placed above the picture, displays the contents of the Alt attribute of the picture, and covers the top of the picture, as Figure 2.
 
Using Content:attr (ALT) is very easy to implement and reduces the structure. Take a look at how it is implemented:
 
CSS style:
 
		div {
                border:1px
		solid
		#090;
                width:78px;
				height:59px;
				padding:3px;
            }

            Div
		img:hover{
            	box-shadow:0
		0
		3px
		#666;
            }
	    Div
		img:hover:after{
		content:attr (ALT);
		Display:block;
		height:20px;
		line-height:20px;
		Background: #666;
		opacity:0.8;
		margin-top:-20px;
		Color: #fff;
		Text-align:center;
		font-size:12px;
	    }
 
HTML code:
 
<div></div>
 
Inserting the project number, in Css2, can only be done using List-style, but in CSS3, we can use the content to add the project number, and the functionality is more powerful. Let's look at a simple example:
 
CSS style:
 
		h1{
			counter-increment:mycounter;
		}
		h1:before{
			Content:counter (mycounter);
		}
 
HTML code:
 
	
 
Look at the performance in the browser (ff3.6/4.0/7.0, Chrome14, Safari5, opera10.6, IE8):
 
 
Counter-increment:name This sentence is the name of the set number, this name can be arbitrary, and here I am using MyCounter. Use Content:counter (name) in the form of the call.
 
In the figure above, the number directly behind the title, a bit ugly, we can add text, the method of adding text is very simple.
 
Content: "Counter" (MyCounter) "chapter";
 
Enclose the text in quotation marks, add the text and counter (mycounter) between the space, can also use no space, but they are not displayed. View the results after adding text in the browser (ff3.6/4.0/7.0, Chrome14, Safari5, opera10.6, IE8):
 
 
Not only can you add text in numbers, we can also change the type of numbers. We can use the List-style-type value to invoke the method counter (name,list-style-type value);
 
CSS style:
 
		h1{
			counter-increment:mycounter;
		}
		h1:before{
			Content: "section" Counter (Mycounter,upper-roman) "chapter";
		}
 
HTML code:
 
	
 
Here, we're using the uppercase Roman alphabet, and look at the performance in the browser (ff3.6/4.0/7.0, Chrome14, Safari5, opera10.6, IE8):
 
 
Practice: We all know that the value of List-style-type can be circle this kind of value, so what will be shown here?
 
Let's look at the number nesting, which is very common in the directory. Take a look at the example:
 
CSS style:
 
		dt{
			counter-increment:btitle;
		}
		dd{
			counter-increment:stitle;
		}
		dt:before{
			Content:counter (Btitle) ".";
		}
		dd:before{
			Content:counter (Btitle) "." Counter (Stitle) ".";
		}
 
HTML code:
 
	<dl>
		<dt> Headlines </dt>
		<dd> small title </dd>
		<dd> Small title </dd>
		<dt > Big title </dt>
		<dd> Small title </dd>
		<dd> Small title </dd>
		<dt> Big title </dt>
		<dd> Small title </dd>
		<dd> Small title </dd>
		<dt> Big title </dt>
		<dd> Small title </dd >
		<dd> Small title </dd>
		<dd> Small title </dd>
	</dl>
 
Look at the display in the browser:
 
 
This display effect does not meet my requirements, because 2.3 2.4 according to our needs, should be 2.1 2.2, the same, the back is also. But the browser is very force-providing a property counter-reset, literally we know, it is used to reset. See examples of how to use:
 
CSS style:
 
		dt{
			Counter-increment:btitle;
			Counter-reset:stitle;
		}
		dd{
			counter-increment:stitle;
		}
		dt:before{
			Content:counter (Btitle) ".";
		}
		dd:before{
			Content:counter (Btitle) "." Counter (Stitle) ".";
		}
 
Here, the DD number is reset in DT to see the effect:
 
 
Is it a great force? There's wood? There's wood?
 
All Demo Downloads