当前位置：首页 > news >正文

CSS 中的 ::before 和 ::after 伪元素

news 来源：原创 2024/9/20 19:50:13

一、CSS 伪元素

二、::before ::after 介绍

1、::before

2、::after

3、content 常用属性值

三、::before ::after 应用场景

1、设置统一字符

2、通过背景添加图片

3、添加装饰线

4、右侧展开箭头

5、对话框小三角

6、插入icon图标

一、CSS 伪元素

CSS伪元素是指，在CSS 中使用一些特殊的选择器，创建出来的虚拟元素，并不是实际存在的HTML元素；

用来选择和操作文档中的特定部分，实现一些特殊效果；
伪元素使得在不增加额外HTML标签的情况下，对文档中的内容进行样式化；
伪元素也是一种元素，可以设置html中支持的各种属性，包括元素的布局、定位、宽高、背景等等；

本文主要介绍::before 、::after 这个两个伪元素的相关内容和一些使用场景；

二、::before ::after 介绍

::before ::after 伪元素用来给元素前面或者后面插入指定内容；

使用content属性来指定要插入的内容；
必须配合content属性一起使用，content的属性值可以为空；
伪元素的display属性值默认为inline；

1、::before

::before选择器用来向指定元素之前插入内容；

（1）语法

元素::before{content: "要插入的内容";/* 其他属性 */
}

（2）示例

给页面所有的p元素前面插入内容；

<style>p::before{content: "使用::before伪元素插入的内容——";/* 其他属性 */}
</style>
<body><div><p>第一个P标签中的内容</p><p>第二个P标签中的内容</p><p>第三个P标签中的内容</p></div>
</body>

2、::after

::after选择器用来向指定元素之后插入内容；

（1）语法

元素::after{content: "要插入的内容";/* 其他属性 */
}

（2）示例

给页面所有的p元素后面插入内容；

<style>p::after{content: "——使用::after伪元素插入的内容";/* 其他属性 */}
</style>
<body><div><p>第一个P标签中的内容</p><p>第二个P标签中的内容</p><p>第三个P标签中的内容</p></div>
</body>

3、content 常用属性值

::before ::after 必须配合content属性一起使用，以下是content的常用属性值：

序号	属性值	说明
1	string	设置文本内容；
2	url("url")	设置图片等媒体文件的URL链接；
3	open-quote	设置为前引号；
4	close-quote	设置为后引号；
5	attr(attribute)	将元素的 attribute 属性以字符串形式返回；
6	counter	设定计数器；
7	none	设置 content 为空值；
8	normal	在 :before 和 :after 伪类元素中会被视为 none，即也是空值；

（1）设置文本内容

设置content的属性值为string类型，即可给伪元素添加文本；

<style>span::before{content: "使用::before添加的文本前缀——————";}span::after{content: "————使用::after添加的文本后缀";}
</style>
......
<body><span class="box">我是HTML元素中的文本</span>
</body>

（2）设置媒体链接

通过url()属性值，即可导入媒体文件为伪元素的内容；

<style>.container {margin: 100px;}.avatar::after{content: url("D:\\test\\girl.png");display: block;}
</style>
......
<body><div class="container"><div class="avatar">示例图片</div></div>
</body>

注意，这里使用url添加的图片不能设置大小，最好通过背景添加图片；

（3）设置前 || 后引号

通过open-quote或close-quote属性值，即可给设置伪元素的内容为前引号或后引号；

<style>p:nth-child(1)::before{content:open-quote;/* 其他属性 */}p:nth-child(2)::after{content:close-quote;}
</style>
......
<body><div><p>添加前引号</p><p>添加后引号</p></div>
</body>

（4）获取元素属性

通过attr()获取元素的某一个属性值（以字符串的形式返回），并设置为伪元素的内容；

<style>a:after {content: " (" attr(href) ")";}
</style>
......
<body><div><a href="https://www.csdn.net">CSDN</a>点击跳转至CSDN...</div><div><a href="https://www.baidu.com">百度</a>点击跳转至百度...</div>
</body>

（5）设置计数器

<style>div {counter-increment: index;}div:before {content:counter(index);}
</style>
......
<body><div>、、、、、、我是第1个div、、、、、、</div><div>、、、、、、我是第2个div、、、、、、</div><div>、、、、、、我是第3个div、、、、、、</div><div>、、、、、、我是第4个div、、、、、、</div>
</body>