CSS3 Content Generation

Content is commonly used with: Before,:after to generate Content (IMG and input do not have this attribute), contents can generally be in the following four kinds:

1. None: No value is generated.
2. attr: inserting Tag property values
3. URL: Inserts an external resource (image, audio, video, or any other resource supported by the browser) using the specified absolute or relative address
4. String: Insert String

1 . Clearfix:after{2 content: "";3 Visibility:Hidden;4 Display:Block;5 font-size:0;6 Clear:both;7 Height:0;8}9 * HTML. Clearfix{Zoom:1; }/*IE6*/Ten *:first-child+html. Clearfix{Zoom:1; }/*IE7*/

attr: Insert tag attribute value Normal text demo

Green, take it to blue, and green Bluetooth, ice, water for it, and cold in water.

Css Code:

1 . Attr-title:after{ 2 content:attr (title); 3 color:#f00; 4 }

Picture slide over animation effect

#imghover Li{position:relative;Margin-right:20px;}#imghover A:after{content:attr (title);position:Absolute;Top:0; Left:0;width:100%;Background-color:Rgba (0,0,0,0.5);Line-height:30px;Color:#fff;text-align:Center;font-size:14px;Text-shadow:-1px-1px 0 Rgba (0,0,0,0.8);Opacity:0;-webkit-transition:All 0.3s Ease;-moz-transition:All 0.3s Ease;-ms-transition:All 0.3s Ease;-o-transition:All 0.3s Ease;transition:All 0.3s Ease;}#imghover A:hover:after{Top:50%;Margin-top:-15px;Opacity:1;}

View CodeURL: Inserts an external resource with the specified absolute or relative address

• Source.txt
• Source.doc
• Source.pdf
• Source.jpg
• Mailto:marvin

#icon_list a{font-size:16px;}#icon_list A[href]:before{content:"';Margin-right:5px;}#icon_list a[href$= '. txt ']:before{content:URL (images/icon_txt.gif);}#icon_list a[href$= '. pdf ']:before{content:URL (images/icon_pdf.gif);}#icon_list a[href$= '. Doc ']:before{content:URL (images/icon_doc.gif);}#icon_list a[href$= '. jpg ']:before{content:URL (images/icon_pic.gif);}#icon_list a[href^= "mailto:"]:before{content:URL (images/icon_mailto.gif);}

View CodeString: Insert String

In fact, about the insertion string, the page structure has been applied a lot, the first is the H2 title to the left of the blue piece, the second is the mouse over the code area animation effect, the third is the footer part of the Emailto next to the small icon, if interested can be viewed with firebug view, This is mainly about how to use the content to do counter

1. CSS3 New Selector
   1. Property Selector
   2. Structure pseudo-Class selector
2. Enhanced text and color features
   1. Text shadow, text wrapping, overflow text
   2. RGBA Color Mode
3. New Flexible box model
   1. Box layout
   2. Flexible layout combat

#counter Li{Margin-left:0;List-style:None outside None;counter-increment:Title1;}#counter Li:before{content:" counter (TITLE1)" chapter: ";font-size:14px;Color:#f00;}#counter Li Li{Margin-left:25px;counter-increment:Title2;}#counter Li Li:before{content:counter (title1) "." Counter (title2);}

• The application of the Content counter can refer to these two articles CSS counters–the right-to Organize Your Ordered content,css Content, Counter-increment and Cou Nter-reset detailed

  inserting special characters

  At the end of this article, say how to insert special characters in the content, about the special characters can refer to here: HTML special characters, please first check the method, that is, the first column, the second column is used in HTML, you need to precede the &#; third row of CSS can be used, However, a backslash \ Escape is required. The following instance operation

  • CSS3 New Selector
  • Enhanced text and color features
  • New Flexible box model
  • Copyright

#special Li:before, #special li:after{Color:#f00;}#special Li:nth-child (2n+1): Before{Color:#ccc;}#special Li:first-child:before, #special li:first-child:after{content:"\25ba";}#special Li:first-child:after{-webkit-transform:Scale ( -1);-moz-transform:Scale ( -1);-ms-transform:Scale ( -1);-o-transform:Scale ( -1);Transform:Scale ( -1);}#special Li:nth-of-type (2): Before{content:"\2714";}#special Li:nth-child (3): after{content:"\00BB";}#special Li:last-of-type:before{content:"\00A9";Margin-right:5px;}

By the way, the sub-element selector for the next CSS3 is applied, and then for the first after arrow, by the scale of the transform-one turn around

More information

• Pure CSS GUI Icons
• Awesome:10 CSS3 Box Shadow experiments
• Pure CSS speech bubbles
• CSS3 ordered list styles
• CSS3 breadcrumbs
• Cool headings with pseudo-elements
• A Whole Bunch of amazing Stuff Pseudo Elements Can do

This article excerpt from http://www.w3cplus.com/solution/css3content/css3content.html