標籤：set strong clear log com 清除浮動 效果 lock bsp
1、說明
":before" 虛擬元素可以在元素的內容前面插入新內容。
":after" 虛擬元素可以在元素的內容之後插入新內容。
2、相容性
虛擬元素有2種寫法，單冒號和雙冒號，單冒號和雙冒號作用是一樣的。
相容性查看：http://caniuse.com/#search=%3Abefore
從看見：IE8瀏覽器只支援單冒號寫法，不支援雙冒號寫法，因此建議before和after虛擬元素採用單冒號寫法。
3、應用
（1）清除浮動
.clearfix:after { content: " "; display: table;}.clearfix:after { clear: both;}
（2）添加美化表徵圖
如清除ul li顯示預設的小黑點，添加美化的符號
<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <title>css 虛擬元素應用--添加美化表徵圖</title> <style type="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虛擬元素使用</li> <li>2、after虛擬元素使用</li> </ul> </body></html>
效果：
說明：將虛擬元素設定為的區塊層級元素，虛擬元素同樣擁有盒模型的概念。
css before和after虛擬元素應用
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
