admin管理员组

文章数量:1535871

2024年6月7日发(作者：)

::before和::after的一些使用场景

如果你想在某些文字的前面加图标或者改变li元素的默认图标，你会如何做？常见的

做法是在文字前再加一个标签用于存放图标，引入一个图标库（比如Iconfont-阿里巴巴矢

量图标库）或者一张图标图片。

这里介绍一种不使用额外的html标签，纯粹使用css就能插入到html内容中或者制作

自定义图标。

常见伪元素——::first-letter,::first-line,::before,::after,::selection。

::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部

添加内容。

特性：

１）这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层

加入。所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，

例如图标，网站有些联系电话，希望在它们前加一个icon，就可以使用:before伪元素。

２）伪元素:before和:after添加的内容默认是inline元素，所以利用伪元素添加形

状内容时，需要设定display:block；不然无法设定长宽。

３）伪元素不属于文档，所以js无法操作它，伪元素属于主元素的一部分，因此点击

伪元素触发的是主元素的click事件。

定义：在被选中的元素的内容前面（before）和后面(after)插入内容。

语法：

p::before{ p::after{

content:'内容'； content:'内容';

} }

使用场景：

例一：在i元素前面添加一个图标（引入阿里巴巴矢量库）

１）Html代码

２）首先在阿里巴巴矢量库下载需要的图标，然后引入，参考“引入外部图标.doc”文

档，如下图，是引入的css代码。

３）使用::before在i元素前面添加引入的图标。

content中是图标代码，下载的图标文件中，有一个demo_文件，打开后会

显示图标的代码，如下图，需要去掉前面的&#x，并且添加“＼”才可以。

４）整体代码和效果如下图

例二：在li元素前面添加一个图标,修改掉原来的图标

１）效果图（前面的图标是从库里引用的，参考上一例）

２）代码

例三：在元素前面添加一个图形

１）如下图，在文字前后添加矩形效果条

２）html代码

３）css代码

例四：给图片添加一闪而过的白色闪光

1）如下图，给图片添加一个白光，鼠标放置在图片上时，会闪过一道白光。

2）html代码

3）css代码

本文标签： 图标元素添加内容引入

版权声明：本文标题：通过before或after在内容前后添加图标 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1717735719a604153.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。