Usage of before and after pseudo-elements in CSS

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:

##Effect:

1.4 Replaceable elements

Replaced elements: Their presentation is not controlled by CSS. These elements are objects whose appearance is rendered independently of CSS.

Typical replaceable elements include