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...