时间:2021-05-08
前言
众所周知::before与::after两个伪元素其实是CSS3中的内容,然而实际上在CSS2中就已经有了这两者的身影,只不过CSS2中是前面加一个冒号来表示(:before和:after)。今天主要讲讲这两个伪元素该如何使用。
一、与普通元素一样可以给其添加样式
比如说我想在文字前面添加一个图标,如果我用普通元素写的话我可以这样写:
.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;}<div class="del"><i></i><span>删除</span></div>但是放个空的 i 标签总感觉很不爽,直接把它去掉吧!
.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;}<div class="del"><span>删除</span></div>这里就直接用::before伪元素代替了空的 i 标签,两者效果相同:
同样利用这一点,我们可以使用::after伪元素解决经典清除浮动的问题:
.clearfix::after{ display:block; clear:both; content:""; overflow:hidden; height:0; }
当然,如果你网站还需要兼容IE8,那还是用:after吧,::after不兼容。
二、在元素中插入文本
有时候我可能需要在许多元素中同时加入相同的文字,那么可以考虑用这两个伪元素。例如:
.up:after{ content: '↑'; color: #f00;}.down:after{ content: '↓'; color: #0f0;}<p class="up">上升</p><p class="down">下降</p>实现效果如下:
三、在元素中插入图像
实现类似本文第一个例子中的图片加文字效果,也可以使用伪元素直接插入图片而不需要使用背景图,就像这样:
.del{ font-size: 20px;}.del::before{ content: url("imgs/delete.png"); display: inline-block; margin-right: 2px; vertical-align: middle; }.del span{ vertical-align: middle;}但是需要非常注意的是,使用这种方式插入的图片并不能通过控制伪元素的大小来改变图片的大小,只能引入固定大小的图片(这个略坑啊...),所以个人觉得最好还是老老实实用背景图片比较好。
四、插入连续项目编号
可能你会说,加入连续项目编号还不简单吗?直接用有序列表ol不就行了嘛!
是,确实是可以实现,就像这样:
<p>我的爱好:</p><ol> <li>吃饭</li> <li>睡觉</li> <li>打豆豆</li></ol>这是Chrome下的效果:
看起来挺好,没啥问题,那我若想给前面的序号加粗呢?一脸懵逼了...
这时候你说,那我直接在每条文字前手动加标签和数字,然后给标签加上样式不就行了么?
ul li{ list-style: none;}ul li span{ font-weight: bold;}<p>我的爱好:</p><ul> <li><span>1.</span>吃饭</li> <li><span>2.</span>睡觉</li> <li><span>3.</span>打豆豆</li></ul>没错,现在是三条,要是是三十条,三百条,怎么办?一条条加?(很傻很天真...)
这时候若用纯CSS的方式,还得用到伪元素:
ul li{ list-style: none; counter-increment: number;} //number相当于是个变量,随便取名就好,在伪元素中调用ul li::before{ content: counter(number)"."; font-weight: bold;} //注意这里不同于JS,counter(number)与"."之间不需要加任何东西,直接连接就好<p>我的爱好:</p><ul> <li>吃饭</li> <li>睡觉</li> <li>打豆豆</li></ul>效果如下:
那我如果不想要阿拉伯数字,我就想用中文数字可以么?
可以!伪元素很好很强大!
ul li{ list-style: none; counter-increment: number;} ul li::before{ content: counter(number,cjk-ideographic)"、"; font-weight: bold;}效果如下:
除了这个cjk-ideographic,你还可以使用更多CSS中 list-style-type 属性:(直接贴上w3cshool里面的表格)
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
CSS中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪元素选择器中,有一个conte
因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元
本教程简单的介绍一下关于CSS伪类:before,:after详解,有需要了解的朋友可以参考一下下。:before伪元素在元素之前添加内容这个伪元素允许创作人员
第一部分:基础知识1.与:active和:hover这些伪类不一样,他们都是伪元素。2.:before/:after伪元素是在css2中提出来的。而::befo
注:该表引自W3School教程伪元素的分类及作用:下面通过代码看下CSS伪类修改input选中样式的示例代码,代码如下所示:主要是用到了after伪类和字体符