CSS3 in order to distinguish between pseudo-classes and pseudo-elements, pseudo-elements are written with double colons.
Common Pseudo-Class--:hover,:link,:active,:target,:not (),: Focus.
Common pseudo-element--::first-letter,::first-line,::before,::after,::selection.
:: Before and:: After-specific content, used in CSS rendering to add to the head or tail of the element's logic.
These additions do not appear in the DOM, do not change the contents of the document, are not duplicated, but are only added to the CSS render layer.
So do not use: Before or: After show meaningful content, use them as much as possible to display the cosmetic content, the example of the mark.
Example: the website some contact phone, want to add an icon before them, you can use: before pseudo-element, as follows:
<! DOCTYPE html><meta charset= "utf-8"/><style type= "Text/css" > . Phonenumber::before { content: ' \260e '; font-size:15px;} </style><p class= "PhoneNumber" >12345645654</p>Note: The Html,js and CSS of these special characters are different, and you can see the html,js,css of HTML special characters.
Second, content properties:: Before and:: After must be used with the content property to define what is inserted, the contents must have a value, or at least null. By default, display of pseudo-class elements is the default value of inline, which can be changed by setting Display:block.
Content is preferable to the following values.
1, StringWrapping a string with quotation marks adds a string to the element's content. such as: A:after{content: ""}
Example:
<! DOCTYPE html><meta charset= "utf-8"/><style type= "text/css" >p::before{ content: ""; Color:blue;} p::after{ content: ""; Color:blue;} </style><p> the mundane World </p>Invokes the properties of the current element through attr (), such as displaying the image alt hint text or the link's href address.
<style type= "text/css" >a::after{ Content: "(" attr (HREF) ")";} </style><a href= "Http://www.cnblogs.com/starof" >starof</a>Used to reference media files.
Example: "Baidu" before giving a picture, the following gives the href attribute.
<style>a::before{ content:url ("Https://www.baidu.com/img/baidu_jgylogo3.gif");} a::after{ Content: "(" attr (HREF) ")";} a{ Text-decoration:none;} </style>---------------------------<body><a href= "http://www.baidu.com" > Baidu </a></body > Effect:
4, counter ()The counter can be invoked without using list elements to implement the ordinal function.
Use with Counter-increment and Counter-reset properties:
H2:before {counter-increment:chapter; Content: "chapter" Counter (Chapter) "."}
Code:
<style>body{ counter-reset:section;} h1{ counter-reset:subsection;} h1:before{ counter-increment:section; Content:counter (section) ",";} h2:before{ counter-increment:subsection; Content:counter (section) "." Counter (subsection) ",";} </style>------------------------------------------------<body>Effect:
For more information, refer to: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters
third, the use1. Clear floatingThere are several ways to clear floating methods, and now the most common is the following method, only the following styles can be used to automatically clear the trailing element at the end of the floating
. cf:before,.cf:after { content: ""; display:table; }.cf:after { clear:both;}. CF { *zoom:1;}Float does not have a center value, but it can be simulated by pseudo-classes.
This effect is very interesting, left and right through:: Before float each left half the position of the picture, and then the picture absolutely positioning up.
The core CSS is as follows:
#page-wrap {width:60%; margin:40px auto; position:relative;} #logo {position:absolute; top:0; left:50%; Margin-left: -125px;} #l, #r {width:49%;} #l {float:left;} #r {float:right;} #l: Before, #r: before {content: ""; width:125px; height:250px; } #l: Before {float:right;} #r: Before {float:left;}The complete code is as follows:
View CodeOriginating From: https://css-tricks.com/float-center/
3. Make various graphic effectsExample: A six-point star
Press CTRL + C to copy the CodePress CTRL + C to copy the Code#star-six Div is a positive triangle line, #star-six::after is an inverted triangle, through absolute positioning, adjust its position can achieve six point star effect.
Point me to see more.
4. Create small icons without using picturesExample: a phone call
Very ingenious application of a div left border fillet when fuselage,:: Before and:: After mating fillet when the handset.
<style type= "Text/css" > #phone {width:50px;height:50px;border-left:6px solid #EEB422; border-radius:20%; Transform:rotate ( -30deg);-webkit-transform:rotate ( -30deg); margin:20px;margin-right:0px;position:relative; Display:inline-block;top: -5px;} #phone: before{width:15px;height:15px;background: #EEB422; border-radius:20%;content: ";p osition:absolute;left:- 2px;top:1px;} #phone: after{width:15px;height:15px;background: #EEB422; border-radius:20%;content: ";p osition:absolute;left:- 3px;top:34px;} </style><div id= "Wraper" > <div id= "Phone" ></div></div>More icons:
View CodeThis effect comes from: http://www.w3cfuns.com/blog-5444604-5402127.html
The great God created 84 small icons with pseudo-elements to see http://nicolasgallagher.com/pure-css-gui-icons/
5. Display the URL of the printed page<style> @media Print { a[href]:after { content: "(" attr (HREF) ")"; }} </style><body><a href= "http://www.baidu.com" > Baidu </a></body> Often used to add huge quotes to the BLOCKQUOTE reference segment as the background, you can use:: Before to replace the background. The advantage is that you can leave space for the background, and you can use text instead of pictures:
<meta charset= "Utf-8"/><style type= "Text/css" > blockquote::before { content:open-quote; Color: #ddd; Z-index:-1; font-size:80px;} </style><blockquote> quote a paragraph, double quotes with:: Before pseudo-element implementation </blockquote>Example: With CSS positioning to achieve a mouse move up, hyperlinks appear square brackets effect
<meta charset= "Utf-8"/><style type= "text/css" >body{ background-color: #425a6c;} a { position:relative; Display:inline-block; Outline:none; Color: #fff; Text-decoration:none; font-size:32px; padding:5px 20px;} A:hover::before, A:hover::after {position:absolute;} A:hover::before {content: "\5b"; Left: -10px;} A:hover::after {content: "\5d"; right: -10px;} </style><a> mouse move up with square brackets </a>For more creative link effects, refer to creative links effects.
8,:: Before and:: After implementing multi-background pictureExample: one label application 5 background map
View CodeOriginal effect from: multiple backgrounds and Borders with CSS 2.1
This effect looks really is the brain hole big open, although multi-background diagram uses CSS3 's background-image to be able to realize easily. But this article, written in 10, has been in the past 5 years, and it is precisely their attempts and efforts to speed up the development of the CSS3 standard, making it easier to develop today. What can we do today for developers who are 5 years behind?
The author starof, because the knowledge itself in the change, the author is also constantly learning and growth, the content of the article is not updated regularly, in order to avoid misleading readers, convenient tracing, please reprint annotated source: http://www.cnblogs.com/starof/p/4459991. HTML has a problem welcome to discuss with me, common progress.
You can use:: Before,:: After?
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
