This article mainly introduces to you several usage scenarios of pseudo elements created by :before and :after in CSS, such as filling text, serving as iconfont, progress line, timeline and geometric figures. I hope it can help you.
1. Introduction
1.1 Description
: before and :after in CSS will create a pseudo element, where the pseudo element created by : before is the selected The first child element of the element, and the pseudo-element created by :after is the last child element of the selected element.
:The default style of pseudo-elements created by :before and :after is inline style.
1.2 Syntax
/* CSS3 */ selector::before /* CSS2 */ selector:before
CSS3 introduced :: (two colons) to distinguish pseudo-classes (:one colon) and pseudo-elements (::two colons).
Pseudo-class: operate the element itself, such as :hover, :first-child, :focus, etc.
Pseudo elements: operate the sub-elements of elements, such as ::before, ::after, ::content, etc.
Only supports :(a colon) in IE8, so in order to be compatible with these browsers, you can also use :before and :after.
1.3 content attribute
The content attribute represents the content filled by the pseudo element.
Example
CSS:
.test-p {
width: 100px;
height: 100px;
margin-left: 20px;
background-color: #eee;
}
.test-p::before {
content: "♥";
color: red;
}
.test-p::after {
content: "♥";
color: blue;
}HTML page:
