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

The above is the detailed content of Usage of before and after pseudo-elements in CSS. For more information, please follow other related articles on the PHP Chinese website!