css before和after伪元素应用
2018-06-24 01:45:17来源:未知 阅读 ()
1、说明
":before" 伪元素可以在元素的内容前面插入新内容。
":after" 伪元素可以在元素的内容之后插入新内容。
伪元素默认展示为inline,
即
display: inline;
必须写content属性,不然伪类不起作用!
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>
效果:
说明:将伪元素设置为的块级元素,伪元素同样拥有盒模型的概念。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:AngularJS小案例:日程表
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash