伪元素选择器

最新推荐文章于 2025-05-19 11:03:49 发布

时松

最新推荐文章于 2025-05-19 11:03:49 发布

阅读量291

点赞数

CC 4.0 BY-SA版权

分类专栏：基础文章标签：伪元素选择器

本文链接：https://blog.youkuaiyun.com/ice_yr/article/details/96833972

基础专栏收录该内容

79 篇文章

订阅专栏

伪元素选择器：
伪元素选择器是用双冒号来使用

1.E:first-letter 文本的第一个单词或字（如中文、英文、日文、韩文等）
2.E:first-line: 文本第一行  
（注意：只有文本的第一行字改变，
窗口缩小原来部分第一行字转为第二行其颜色或其他样式不改变，因为它不在是第一行）
3.E：selection:可改变选中文本的样式
如：
p::first-letter {  /* 选择第一个字*/
		color: red;
		font-size: 20px;
	}
	p::first-line {  /* 选择第一行,*/      
		color: green;
		font-size: 20px;
	}
	p::selection {   /* 当我们选中 文字 的时候，可以变化的样式*/
		color: skyblue;
	}

<p>这是一个自然段111111111111111111111111111111111111111111111111111111
	1111111111111111111111111111111111111111111111111111111111111111111111
	111111111111111111111111111111111111111111111111111111</p>

content属性使用

div::before {
	content:"开始"
}
div::after {
	content:"结束"
}

例：

	div::before {      /*before 和 after 在盒子div的内部的前面插入或是后面插入*/
 		content: "我";
	}
	div::after {
		content:"17";
	}

<div>今年</div>

注意：content：后面输入的内容要加 " " (用英文字体)

注意：伪元素:before和:after添加的内容默认是inline元素（行内元素相当于span a），这两个伪元素的content属性，表示伪元素的内容，设置:before和:after时必须设置其content属性，否则伪元素就不起作用。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	  /*.one 类选择器  :hover 伪类选择器  ::after 伪元素选择器 */
		div::before {
			content: "无名";
			background-color: pink;
			border: 1px solid blue;
			width: 100px;
			height: 100px; 
			display: block;
			/*类选择器  伪类选择器都是选取对象
			伪元素选择器 本质上是插入了一个元素（标签 盒子）*/
		}
		div::after {
			content: "点";
			display: block;
			width: 50px;
			height: 50px;
			border: 1px solid blue;
		}
	</style>
</head>
<body>
	<div>zero</div>
</body>
</html>

案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {
			width: 296px;
			height: 180px;
			margin: 100px auto;
			position: relative;  /*子绝父相*/
		}
		div:hover::before {  /*鼠标经过之后前面插入一个伪元素*/
			content: "";
			width: 100%;
			height: 100%;
			border: 10px solid rgba(255, 255, 255, 0.3);   /*边框会撑开盒子*/
			display: block;   /*伪颜色属于行内元素*/
			position: absolute;   /*要伪元素不占位，就用绝对定位*/
			top: 0;
			left: 0;
			box-sizing: border-box;  /* 把padding和border都算入width里面 */ 
		}

	</style>
</head>
<body>
	<div>
	<img src="ad-l.png" width="100" alt="">	
	</div>
</body>
</html>