Pseudo-classes in CSS3 are written with single colons, and pseudo-elements are written with double colons.
Pseudo-class example - :hover,:link,:active,:target.
Examples of pseudo-elements - ::before,::after,::first-letter,::first-line,::selection.
1. Introduction
I encountered a problem when writing a webpage today. What is the best way to insert a small icon in the background of the viewport? Instead of writing it in a certain tag, it is better to write it in a pseudo-element.
code show as below:
<style>
.header{
width: 10rem;
height: 3.72rem;
background-color: #0b193f;
position: relative;
}
header::after{
content: "";
display: block;
width: 2.39rem;
height: 2.75rem;
background-image: url(../img/bg_right.png);
background-size: cover;
background-position: top right;
position: absolute;
top: 0;
right: 0;
}
</style>
<body>
<header class="header"></header>
</body>::beforeand ::after中含有content，contentused to cssadd "decorative icons" to the logical head or tail of elements during rendering, are just cssclasses such as icons added in the rendering layer.
Unusable :beforeor :afterpseudo-elements display meaningful content, try to use them to display decorative icons and other content.
The following cases in the article are quoted from:
http://t.csdn.cn/GRldP 
http://t.csdn.cn/GRldP II.contentAttributes
Example : There are some contact numbers on the website. If you want to add a ☎ before them icon, you can use :beforepseudo-elements, 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>
::beforeand ::aftermust contentbe used with attributes contentto define the content to be inserted, contentand must have a value, at least empty. By default, the pseudo-class element displayis the default value inline, which can be set display:blockto change its display.
contentThe following values are possible.
1、string
Enclosing a string in quotes will add the string to the element content. like: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>平凡的世界</p>
2、attr()
By attr()calling the properties of the current element, such as displaying altthe prompt text of the picture or hrefthe address of the link.
<style type="text/css">
a::after{
content: "(" attr(href) ")";
}
</style>
<a href="http://www.cnblogs.com/starof">starof</a>
3、url()/uri()
Used to reference media files.
For example: "Baidu" gives a picture in front and hrefattributes in the back.
<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">百度</a>
</body>
Effect: