前端css伪对象选择符

最新推荐文章于 2025-04-06 19:02:52 发布

@码上行动

最新推荐文章于 2025-04-06 19:02:52 发布

阅读量110

点赞数

分类专栏： CSS 文章标签： css html js html5 css3

本文链接：https://blog.youkuaiyun.com/weixin_45935734/article/details/116058686

版权

CSS 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了HTML中的伪对象选择符，包括:after、:before、:first-letter和:first-line的用法，并提供了代码示例展示如何定义元素前后及首字符的样式。此外，还提到了::selection伪元素，用于设置选中文本的样式。这些选择符对于前端开发中的内容插入和美化具有重要作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

伪对象选择符

:after 与content属性一起使用，定义在对象后的内容

:before 与content属性一起使用，定义在对象前的内容

:first-letter 定义对象内第一个字符的样式，注：该伪元素只能用于块元素

:first-line 定义对象内第一行的样式，注：该伪元素只能用于块元素，ie6以下版本浏览器不支持伪对象选择符

::selection 选中之后的样式 只支持这background color属性

代码示例：

<style>
	div{
		width: 200px;
		height: 200px;
		border:5px solid red;
	}
	div:after{
		content: "代码不规范，亲人两行泪";
		color:red;
		width: 100px;
		height: 100px;
		background: blue;
		display: block;
	}
	div:before{
		content:"";
		width: 50px;
		height: 50px;
		background: pink;
		display: block;
		visibility: hidden;
	}
</style>
</head>
<body>
	<div>代码千万条，规范第一条</div>
</body>