前端HTML伪元素的使用

钱端攻城狮

已于 2022-02-28 17:38:07 修改

阅读量530

点赞数

分类专栏： HTML 文章标签：前端 html css

于 2022-02-24 19:51:31 首次发布

本文链接：https://blog.csdn.net/m0_54932975/article/details/123119430

版权

HTML 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

本文详细介绍了如何使用CSS伪元素（:after和::before）实现文本装饰及处理浮动元素造成的塌陷问题。通过实例演示了如何为`<a>`标签添加内容、修复`<div>`内的浮动布局，并展示了`box`元素使用`:after`清除浮动的方法。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*伪元素 通过css方式给标签的首或者尾添加一个标签*/
			.one:after{
				/*必写属性  默认是行元素属性*/
				content: "哈哈";
				/*正常标签css样式设置!!!*/
				background-color: salmon;
				color: yellow;
				font-size: 30px;
				width: 200px;
				display: block;
			}
			
			.one::before{
				content: "你好 世界!";
				
			}
			/*--------------*/
			.box{
				background-color: deeppink;
				position: relative;
			}
			
			/*使用伪元素   处理父子浮动塌陷问题!!!*/
			.box:after{
				content: "";
				clear: both;
				display: block;
				/*在父标签末尾追加一个 伪元素并且是块级特性
				 并且清除以上兄弟标签的影响 来撑起父元素高度!*/
			}
			
			
			
			.d1{
				width: 300px;
				height: 200px;
				background-color: palegreen;
				float: left;
			}
			.d2{
				width: 300px;
				height: 300px;
				background-color: palevioletred;
				float: left;
			}
			.over{
				width: 340px;
				height: 340px;
				background-color: rgba(0,0,0,0.4);
				position: absolute;
				left: 280px;
				top: -20px;
			}
		</style>
	</head>
	<body>
		<div class="one">
			<a href="###">京东</a>
			<p>段落块元素</p>
			<span>你呵呵</span>
		</div>
		
		
		
		
		<!--关键作用!!-->
		<div class="box">
			<div class="d1">1111111111</div>
			<div class="d2">2222222222</div>
			<div class="over">悬浮层</div>
			<!--::after clear:both;-->
		</div>
		
		<h1 style="background-color: salmon;">大标题</h1>
	</body>
</html>

运行结果：
在这里插入图片描述