after伪类不显示_CSS中的::after ::before与原理详解

最新推荐文章于 2024-05-10 00:53:46 发布

贺易之

最新推荐文章于 2024-05-10 00:53:46 发布

阅读量4.6k

点赞数

文章标签： after伪类不显示

本文链接：https://blog.csdn.net/weixin_34533343/article/details/113041858

版权

前言

今天来说一下这俩个伪类元素，因为用的不多，感觉这俩个东西已经快被遗忘了。

概念

::before 选择器向选定的元素前插入内容。
使用 content 属性来指定要插入的内容。

::after 选择器在被选元素的内容后面插入内容。
使用 content 属性来指定要插入的内容。

before 前增

<style type="text/css">
	span::before{
		content: '我是前增';
	}
</style>

<body>
	<span><--前增</span>
</body>

after 后增

<style type="text/css">
	span::after{
		content: '我是后增';
	}
</style>

<body>
	<span>后增--></span>
</body>

after 和 before 多是用来清除浮动的，再说这个的时候顺便把原理也讲了

我们先来看一段清除浮动的代码：

<style type="text/css">
	.box{
		margin: 200px auto;
		width: 400px;
		background: #42B983;
		border: 3px solid #000000;
	}
	
	.chl_box{
		width: 200px;
		height: 200px;
		background: #00FFFF;
		float: left;
	}
</style>

<body>
	<div class="box">
		<div class="chl_box"></div>
                <!-- height: 0;overflow: hidden; 为了解决 IE 浏览器的兼容问题 -->
		<div style="height: 0;overflow: hidden;clear: both;"></div>
	</div>
</body>

在早期我们通过在div标签中添加了一个空的标签，并且给这个空的标签清除浮动。但是这样的话就需要每次都添加一个空的标签。再来看下面这段通过 after 来清除浮动的代码

<style type="text/css">
	.box{
		margin: 200px auto;
		width: 400px;
		background: #42B983;
		border: 3px solid #000000;
	}
	
	.chl_box{
		width: 200px;
		height: 200px;
		background: #00FFFF;
		float: left;
	}
	
	.box::after{
		content: "";
		display: block;
                clear: both;
                /* height: 0;overflow: hidden; 为了解决 IE 浏览器的兼容问题 */
 		height: 0;
		overflow: hidden;
                /* visibility:hidden;为了去隐藏content中的内容 */
		visibility: hidden;
	}
</style>

<body>
	<div class="box">
		<div class="chl_box"></div>
	</div>
</body>

从效果上来看，after和before也是一个标签，所以我们就可以利用这个伪元素来清除浮动，从根本上来说它和加一个空标签来清除浮动是一样的。这也是他的原理

贺易之

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
after伪类不显示_CSS中的::after ::before与原理详解

前言今天来说一下这俩个伪类元素，因为用的不多，感觉这俩个东西已经快被遗忘了。概念::before 选择器向选定的元素前插入内容。使用 content 属性来指定要插入的内容。::after 选择器在被选元素的内容后面插入内容。使用 content 属性来指定要插入的内容。before 前增<style type="text/css"> span::before{ con...
复制链接

扫一扫