css 伪元素

最新推荐文章于 2024-10-25 00:09:52 发布

原创最新推荐文章于 2024-10-25 00:09:52 发布 · 289 阅读

0 ·

CC 4.0 BY-SA版权

css3 专栏收录该内容

11 篇文章

订阅专栏

CSS 伪元素用于向某些选择器设置特殊效果

语法

元素::伪元素（Element::pseudo-element）

伪元素——Element::first-line

根据“first-line”伪元素中的样式对Element元素中的第一行文本进行格式化

说明：“first-line”伪元素只能用于块级元素

<!DOCTYPE html>
<html>
<head>
	<title>伪元素</title>
	<meta charset="utf-8">
	<style type="text/css">
		div{
			width: 800px;
			margin:0 auto;
		}
		div::first-line{
			color:#f00;
		}
	</style>
</head>
<body>
	<div>
		sdlgkjslaglsndg,dsngajbgkjsaglashdgsnadgkjbdjhagwogjdlgms.dgnmsndgksjgdkj
		hgs;ghwkjhgskjgnskjhgklshgkrhglwknlwnsguhgeiuwiueyoishgl87467yiwu4hkjhseytf87wtqiyq08uowihjgkhrgjre7ywugoiwejgflwkjgwhgwhowuhgohwohgwhgdlgkjslaglsndg,dsngajbgkjsaglashdgsnadgkjbdjhagwogjdlgms.dgnmsndgksjgdkjhgs;ghwkjhgskjgnskjhgklshgkrhglwknlwnsguhgeiuwiueyoishgl87467yiwu4hkjhseytf87wtqiyq08uowihjgkhrgjre7ywugoiwejgflwkjgwhgwhowuhgohwohgdlgkjslaglsndg,dsngajbgkjsaglashdgsnadgkjbdjhagwogjdlgms.dgnmsndgksjgdkjhgs;ghwkjhgskjgnskjhgklshgkrhglwknlwnsguhgeiuwiueyoishgl87467yiwu4hkjhseytf87wtqiyq08uowihjgkhrgjre7ywugoiwejgflwkjgwhgwhowuhgohwohgdlgkjslaglsndg,dsngajbgkjsaglashdgsnadgkjbdjhagwogjdlgms.dgnmsndgksjgdkjhgs;ghwkjhgskjgnskjhgklshgkrhglwknlwnsguhgeiuwiueyoishgl87467yiwu4hkjhseytf87wtqiyq08uowihjgkhrgjre7ywugoiwejgflwkjgwhgwhowuhgohwohg
	</div>

</body>
</html>

伪元素——Element::first-letter

文本的首字母设置特殊样式

说明：“first-line”伪元素只能用于块级元素

伪元素——Element::before

在元素的内容前面插入新的内容

说明：常用“content”配合使用

div::before{
			content: "我在前面"
		}

伪元素——Element::after

在元素的内容后面插入新的内容

说明：常用“content”配合使用。通过content：“”，clear：both，display:block,可以清除浮动塌陷问题。

伪元素——Element::selection

用于设置在浏览器中选中文本后的背景色和前景色

		div::selection{
			background: red;
			color:white;
		}