CSS3新增的伪元素选择器及其使用

最新推荐文章于 2023-03-12 08:00:00 发布

cp02

最新推荐文章于 2023-03-12 08:00:00 发布

阅读量342

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/m0_49315169/article/details/115490699

版权

伪元素选择器

选择符
- 使用和注意
- - 示例

选择符

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HIML标签,从而简化HTML结构。

使用和注意

1.before和after创建一个元素 ,但是属于行内元素

2.新创建的这个元素在文档树中是找不到的，所以我们称为伪元素

3.语法: element::before{},也有:before{}的写法，但支持IE8

4.before 和after必须有content 属性

5.before在父元素内容的前面创建元素, after在父元素内容的后面插入元素

6.伪元素选择器和标签选择器一样,权重为1

示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
	div{
		width: 200px;
		height: 200px;
		background-color: darkmagenta;
	}
	div::before{/*给前面的加定义*/
		display: inline-block; /*由于是行内元素，设置高宽必须先转换元素*/
		content: '头';
		width: 30px;
		height: 30px;
		background-color: darkgray;
	}
	div::after{
		content: '  搬砖了';
	}
	</style>
<body>
<div>叫你</div>
</body>
</html>

结果为：
在这里插入图片描述

cp02

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3新增的伪元素选择器及其使用

伪元素选择器选择符使用和注意示例选择符选择符简介::before在元素内部的前面插入内容::after在元素内部的后面插入内容伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HIML标签,从而简化HTML结构。使用和注意1.before和after创建一个元素 ,但是属于行内元素2.新创建的这个元素在文档树中是找不到的，所以我们称为伪元素3.语法: element::before{},也有:before{}的写法，但支持IE84.before 和a
复制链接

扫一扫