HTML5学习_day05(8)--html之伪类元素选择器(伪元素)

最新推荐文章于 2023-03-31 05:06:39 发布

woaiwanshumen

最新推荐文章于 2023-03-31 05:06:39 发布

阅读量596

点赞数

分类专栏： HTML5零基础学习笔记文章标签： html5 伪元素伪类元素选择器

本文链接：https://blog.csdn.net/woaiwanshumen/article/details/52673086

版权

HTML5零基础学习笔记专栏收录该内容

43 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪类元素选择器</title>
		<style type="text/css">
			div:after{
				content: "后面添加";
			}
			div:before{
				content: "前面的";
			}
		</style>
	</head>
	<body>
		:before 在内容前面添加一个元素
		:after 在内容后面添加一个元素
		添加内容用content属性
		<div>123</div>
		content:属性值
		
		1.content:“字符串”;
		
		2.图片 content:url(图片路径);注意：图片是原尺寸插入 不可改变大小
		
		3.空 content:"";
		
		4.计数器：content:counter(li)；计数列表时非常方便。
		注意：伪元素时不可以通过content属性来插入html代码的. 错误代码:content:"<h1>标题<h2>"
		:before :after作用:在内容前面或后面添加额外的内容。
		在css3中伪元素用双冒号(::)来表示,主要是为了区分伪类(:);
		6.用伪元素清除浮动。
		注意：一定是在父级上写
		语法：
		选择器：after{
			content:"";
			dispaly:block;<!-- 要注意转化成块级标签-->
			clear:both;
		}
	</body>
</html>

woaiwanshumen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5学习_day05(8)--html之伪类元素选择器(伪元素)

伪类元素选择器 div:after{ content: "后面添加"; } div:before{ content: "前面的"; } :before 在内容前面添加一个元素 :after 在内容后面添加一个元素添加内容用content属性 123 content:属性值 1.content:“字符串”;
复制链接

扫一扫