你的位置:首页 > 网页设计

[网页设计]css before和after伪元素应用

1、说明

":before" 伪元素可以在元素的内容前面插入新内容。

":after" 伪元素可以在元素的内容之后插入新内容。

2、兼容性

伪元素有2种写法,单冒号和双冒号,单冒号和双冒号作用是一样的

兼容性查看 >

从上图看见: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>

效果:

说明:将伪元素设置为的块级元素,伪元素同样拥有盒模型的概念