css3伪元素的使用

最新推荐文章于 2023-06-30 15:46:34 发布

小爱同学-Allen

最新推荐文章于 2023-06-30 15:46:34 发布

阅读量883

点赞数 1

分类专栏： css3

本文链接：https://blog.csdn.net/qq_34595425/article/details/99680816

版权

css3 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

今天我们来学习下如何使用Css3的伪元素

1. “first-line” 伪元素用于向文本的首行设置特殊样式。
注释：“first-line” 伪元素只能用于块级元素。

2.“first-letter” 伪元素用于向文本的首字母设置特殊样式：
注释：“first-letter” 伪元素只能用于块级元素。

3":before" 伪元素可以在元素的内容前面插入新内容。

4":after" 伪元素可以在元素的内容之后插入新内容。

下面我用一个例子来综合使用这四个伪元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪元素的案例</title>
		<style>
			.demo{
				width:300px;
				border:1px solid #ccc;
				margin: 0 auto;
			}
			.demo::first-letter{
				font-size:40px;
				font-weight: bold;
				/*文字下沉*/
				float: left;
			}
			.demo::first-line{
				color:#f00;
			}
			.demo1::before{
				content: url(../img/3.jpg);
				width:300px;
				height:300px;
				display: block;
			}
			.demo1::after{
				content: url(../img/01.png);
				width:300px;
				height:300px;
				display: block;
			}
			.demo1{
				width:300px;
				height:350px;
				border:1px solid #ccc;
				margin: 10px auto;
				text-align: center;
				overflow: hidden;
				padding-bottom: 100px;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			伪before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。

这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。

所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。

举例：网站有些联系电话，希望在它们前加一个icon☎，就可以使用:before伪元素，如下：
		</div>
		<div class="demo1">
			css3新特性
		</div>
	</body>
</html>

在这里插入图片描述

小爱同学-Allen

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3伪元素的使用

今天我们来学习下如何使用Css3的伪元素1. “first-line” 伪元素用于向文本的首行设置特殊样式。注释：“first-line” 伪元素只能用于块级元素。2.“first-letter” 伪元素用于向文本的首字母设置特殊样式：注释：“first-letter” 伪元素只能用于块级元素。3":before" 伪元素可以在元素的内容前面插入新内容。4":after" 伪元素可以在...
复制链接

扫一扫