CSS: befor: the magic of the after pseudo element, befor

CSS: befor: the magic of the after pseudo element, befor

This article focuses on several Use Cases of pseudo elements created in CSS: befor and after, such as text filling, iconfont, progress line, timeline, and ry.

1. Introduction 1.1

In CSS, "befor" and "after" Create a pseudo element. The "befor" pseudo element is the first sub-element of the selected element ,: the pseudo element created after is the last child element of the selected element.

: Befor,: pseudo elements created afterThe default style is inline..

 

1.2 syntax

/* CSS3 */selector::before/* CSS2 */selector:before

CSS3 introduces: (two colons) to distinguish between a pseudo class (: One colon) and a pseudo element (: two colons ).

Pseudo class: The operation element itself, such as hover, first-child, and focus.

Pseudo element: Sub-elements of the operation element, such as: before,: after, And: content.

Only one colon (:) is supported in IE8, so befor and after can be used to be compatible with these browsers.

 

1.3 content Attributes

The content attribute indicates the content filled with pseudo elements.

Example

CSS:

.test-div {    width: 100px;    height: 100px;    margin-left: 20px;    background-color: #eee;}.test-div::before {    content: "♥";    color: red;}.test-div::after {    content: "♥";    color: blue;}

HTML page:

Effect:

 

 

1.4 replaceable Elements

Replaceable element): Its display cannot be controlled by CSS. These elements are a type of appearance rendering independent of CSS objects.

Typical replaceable elements include <iframe>, , <object>, <video>, and form elements, such as <textarea> and <input>.

Some elements are only replaceable in some special situations, such as <audio> and <canvas>.

: Befor: after does not take effect in such elements.

 

1.5 browser support

IE9 is fully supported at the beginning: befor: after, Chrome and Firefox are now fully supported.

IE	Edge	Firefox	Chrome	Android Chrome	IOS Safari
9	All	2	All	All	All

 

 

2. Application scenarios 2.1 Support text characters

Description: The content attribute supports text characters.

Example:

 

2.2 Support for iconfont

Description: The content attribute also supports iconfont font Chart display. This is also the most widely used scenario.

Example: This example has referenced the Alibaba iconfont icon library.

 

2.3 Progress line and timeline

Description: Befor: the pseudo elements created after can be located in the specified position around the element in line mode, such as the progress line and timeline.

1) Progress line

 

2) Timeline

 

2.4 ry

Description: By setting the border attributes of the befor: after pseudo element, you can create a large number of geometric figures, such as triangles, polygon, and pentagram.

1) rectangle

Description: By default, the border attribute of the: befor: after pseudo element is the same as that of other HTML elements.

CSS:

div::before {    width: 0px;    height: 0px;    content: '';    position: absolute;    border-top: 50px solid #f50000;    border-right: 50px solid #6cc361;    border-bottom: 50px solid #6167c3;    border-left: 50px solid #fa00d9;}

Effect:

 

2) Triangle

Description: Display the border of a certain side, and hide the border of the left and right sides (the background is set to transparent), so that the pseudo element can display the shape of the triangle.

Example:

 

3. Extended reading

MDN: before: https://developer.mozilla.org/en-US/docs/Web/CSS/::before

MDN: after: https://developer.mozilla.org/en-US/docs/Web/CSS/::after

: Before,: after Description: https://css-tricks.com/pseudo-element-roundup/

CSS ry: https://css-tricks.com/examples/ShapesOfCSS/

 

Loading the menu of End Web development series articles...