Original Portal: HTTPS: //www.cnblogs.com/staro ...
I. INTRODUCTION
To distinguish css3 pseudo-classes and pseudo elements, double dummy elements colon wording.
Common pseudo-class -: hover,: link,: active,: target,: not () ,: focus.
Common pseudo-elements - :: first-letter, :: first-line, :: before, :: after, :: selection.
:: lower specific content before and :: after, for adding content to a head or tail of the logic elements in css rendering.
These additions do not appear in the DOM, the document does not change the contents can not be copied, only in css render layer was added.
So do not use: before or: after showing content meaningful, try to use them to display the modified content, such as icons.
Example: Some telephone site, hope to add a icon☎, before you can use them: before pseudo-element, as follows:
Copy Code
<! DOCTYPE HTML>
<Meta charset = "UTF-. 8" />
<style type = "text / CSS">
.phoneNumber::before {
content:'\260E';
font-size: 15px;}
</ Style>
<P class = "phoneNumber"> 12,345,645,654 </ P>
copy the code
Note: These special characters html, js and css wording is different, you can view specific special characters html html, js, css written summary.
Two, content properties
:: before and :: after mating content attribute must be used, to define the contents of the inserted content, content must have a value at least is empty. By default, display pseudo-earth element is the default inline, by setting the display: changes the display block.
content less desirable values.
1, string
quotes package a string, the string will be added to the element content. Such as: a: after {content: " "}
For example:
复制代码
<!DOCTYPE html>
<meta charset="utf-8" />
<style type="text/css">
p::before{
content: "《";
color: blue;}
p::after{
content: "》";
color: blue;}
</ Style>
<P> Common World </ p>
copy the code
2, attr ()
calls the current element by attr () property, such as a picture or text prompts alt link href address displayed.
<style type="text/css">
a::after{
content: "(" attr(href) ")";}
</style>
starof
3, url () / uri ( )
used to reference the media file.
Example: "Baidu" previously given a picture given later href attribute.
Copy Code
<style>
A :: before {
content: url("https://www.baidu.com/img/baidu_jgylogo3.gif");}
a::after{
content:"("attr(href)")";}
a{
text-decoration: none;}
</style>
<body>
Baidu
</ body>
copy the code
results:
4, counter ()
call counter, you can not use a list of elements to achieve the function number.
With the counter-increment and counter-reset property is used:
h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }
Code:
Copy 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>
<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>
</ body>
copy the code
results:
Learn More may refer to: HTTPS: //developer.mozilla.org ...
Third, the use
1, clear float
clear float a variety of methods, the most common is following this approach, only you need the following style to automatically remove the floating element in the tail
Copy the code
.cf: before,
.cf: After {
content: " ";
display: table; }
.cf:after {
clear: both;}
.cf {
*zoom: 1;}
Copy the code
2, the analog float: center effect
float value not the center, but may be implemented by a pseudo analog class.
This effect is achieved is very interesting, about location :: before float through each set aside half of the picture, then the picture up absolute positioning.
The core css as follows:
Copy the code
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; }
Copy the code
complete code is as follows:
View Code
From: HTTPS: //css-tricks.com/float -...
3, that various graphical effects
for example: a six-pointed star
Copy Code
<style>
star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
star-six::after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
</style>
<body>
<div id="star-six"></div>
</body>
复制代码
star-six of the div is a regular triangle line, # star-six :: after an inverted triangle, through absolute positioning, adjust its position to achieve the effect of the Star of David.
Point me to see more.
4, do not use pictures to create a small icon
Example: For example, a phone
Very clever application of a div when the body left border plus fillet, :: before and :: after with rounded corners when the handset.
Copy Code
<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: "";
position: absolute;
left:-2px;
top: 1px;
}
#phone:after{
width:15px;
height:15px;
background:#EEB422;
border-radius: 20%;
content: "";
position: absolute;
left:-3px;
top: 34px;
}</style>
<div id="wraper">
<div id="phone"></div></ div>
copy the code
More icons:
View Code
This effect from: HTTP: //www.w3cfuns.com/blog-5 ...
God has created 84 large species of small icons with pseudo-elements, specifically to see http: //nicolasgallagher.com/p ...
5, the display page URL printed
copy the code
<style>
@media Print {
A [the href]: After {
content: " (" attr(href) ") ";}
}
</ Style> <body>
Baidu
</ body>
copy the code
6, to add quotes blockquote
often used in reference to paragraph blockquote add great quotes as background, you can use :: before to replace the background. That benefit is that you can leave room for the background, you can also directly use text instead of images:
Copy Code
<Meta charset = "UTF-. 8" />
<style type = "text / CSS">
blockquote::before {
content: open-quote;
color: #ddd;
z-index: -1;
font-size:80px;}
</ Style>
<blockquote> quoted a paragraph, a double quote :: before pseudo-element implemented </ blockquote>
copy the code
7, hyperlinks, special effects
, for example: with CSS positioning to achieve a hover effect hyperlinks appear in square brackets
Copy Code
<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 {Content :: before: "5B"; left: -10px;}
A: hover {:: After Content: "5D "; right: -10px;}
</ style>
hover brackets appear
duplicated code
More creative effects can link reference: Creative Link Effects.
8, :: before and :: after multi-background image
Example: 5 background image a label application
View Code
Original results from: Multiple Backgrounds and Borders with CSS 2.1