Css before and after pseudo-element applications, cssbeforeafter pseudo

Css before and after pseudo-element applications, cssbeforeafter pseudo

1. Description

": Before" A pseudo element can insert new content before the element content.

": After" a pseudo element can insert new content after the element content.

2. Compatibility

Pseudo elements can be written in two ways,Single colon and double colon, Single colon and double colonThe role is the same.

Compatibility View: http://caniuse.com/#search=%3Abefore

As you can see, the IE 8 browser only supports single-colon writing and does not support double-colon writing. ThereforeWe recommend that you use a colon to write the before and after pseudo elements..

3. Applications

(1) Clear floating

 

.clearfix:after {    content: " ";    display: table;}.clearfix:after {    clear: both;}

 

(2) Add beautification icons

For example, clear ul li to display the default small black spots and add beautifying symbols.

<! DOCTYPE html> 
Effect:

Note:Set the pseudo element to a block-level element. The pseudo element also has the concept of a box model..