当前位置:  首页  >  前端开发  >  HTML

伪元素::before与::after的用法实例教程-html教程

::before与::after两个伪元素其实是CSS3中的内容,然而实际上在CSS2中就已经有了这两者的身影,只不过CSS2中是前面加一个冒号来表示(:before和:after)。今天主要讲讲这两个伪元素该如何使用。一、与普通元素一样可以给其添加样式比如说我想在文字前面添加一个图标,如果我用普通元素写的话我可以这样写:*CSS*.del{font-size:20px;}.de
::before与::after两个伪元素其实是CSS3中的内容,然而实际上在CSS2中就已经有了这两者的身影,只不过CSS2中是前面加一个冒号来表示(:before和:after)。今天主要讲讲这两个伪元素该如何使用。

一、与普通元素一样可以给其添加样式

比如说我想在文字前面添加一个图标,如果我用普通元素写的话我可以这样写:

/*CSS*/.del{ font-size: 20px;}.del i{ display: inline-block; width: 20px; height: 25px; margin-right: 2px; vertical-align: middle; background: url("imgs/delete.png") no-repeat center; background-size: 100%;}.del span{ vertical-align: middle;}
/*HTML*/

删除

但是放个空的 i 标签总感觉很不爽,直接把它去掉吧!

/*CSS*/.del{ font-size: 20px;}.del::before{ content: ""; display: inline-block; width: 20px; height: 25px; margin-right: 2px; vertical-align: middle; background: url("imgs/delete.png") no-repeat center; background-size: 100%;}.del span{ vertical-align: middle;}
/*HTML*/

删除

这里就直接用::before伪元素代替了空的 i 标签,两者效果相同:

同样利用这一点,我们可以使用::after伪元素解决经典清除浮动的问题:

.clearfix::after{ display:block; clear:both; content:""; overflow:hidden; height:0; }

当然,如果你网站还需要兼容IE8,那还是用:after吧,::after不兼容。

二、在元素中插入文本

有时候我可能需要在许多元素中同时加入相同的文字,那么可以考虑用这两个伪元素。例如:

/*CSS*/.up:after{ content: '↑'; color: #f00;}.down:after{ content: '↓'; color: #0f0;}
/*HTML*/

上升

下降

实现效果如下:

那我如果不想要阿拉伯数字,我就想用中文数字可以么?

可以!伪元素很好很强大!

ul li{ list-style: none; counter-increment: number;}  
ul li::before{ content: counter(number,cjk-ideographic)"、"; font-weight: bold;}

效果如下:

以上就是伪元素::before与::after的用法实例教程的详细内容,更多请关注 第一PHP社区 其它相关文章!

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | PHP问答
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有