Home > Developer > Web Develop
1. Description
": Before" pseudo-element can insert new content in front of the content of the element.
The ": after" pseudo-element can insert new content after the element's contents.
2. Compatibility
There are 2 types of pseudo-elements, single colon and double colon , single colon and double colon Act the same .
Compatibility View: http://caniuse.com/#search =%3abefore
From See: IE8 the browser only supports single colon notation and does not support double colon notation, so it is recommended that before and after pseudo elements be written in a single colon.
3. Application
(1) Clear floating
{ content: ""; display: table;} { clear: both;}(2) Add landscaping icons
such as clear UL li display default small black dot, add beautify the symbol
<!DOCTYPE HTML><HTMLLang= "zh"> <Head> <MetaCharSet= "UTF-8" /> <title>CSS pseudo-Element application--Add Beautify icon</title> <styletype= "Text/css"> * {padding:0;margin:0;font-size:14px; }ul{margin:100px;List-style:None; }Li:before{Display:Inline-block;content: "";width:4px;Height:4px;background:#0e337a;position:relative; Left:0;Top:-3px;Margin-right:5px; } </style> </Head> <Body> <ul> <Li>1, before pseudo-element use</Li> <Li>2. After pseudo element use</Li> </ul> </Body></HTML>
Effect:
Description: sets the pseudo element to the block-level element, and the pseudo-element also has the concept of a box model .
CSS before and after pseudo element application
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
