css3新增伪元素选择器::before和::after的概念和实际应用（京东banner小点特效）

最新推荐文章于 2023-12-13 08:59:44 发布

置顶 Jacksong9

最新推荐文章于 2023-12-13 08:59:44 发布

阅读量1.1k

点赞数

分类专栏： css 文章标签： css元素选择器 ::before ::after 轮播切换小点特效

本文链接：https://blog.csdn.net/qq_37120738/article/details/84209077

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言：本人便捷博客能力低下，如果看不懂，请联系我。带来不便，多有抱歉。

一、首先我们需要知道css3新增选择器::before和::after的概念

E::before和E::after

在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

div::befor {
  content:"开始";
}
div::after {
  content:"结束";
}

注意

伪元素:before和:after添加的内容默认是inline元素；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。

二、实例讲解

我最近发现京东的轮播图切换小点特效，百思不得其解，看了源码之后发现其实非常简单。下面是本人写的一个小demo

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	    body {
		    background-color: #ccc;
		    height: 60px;
	    }
		.btn {
			display: inline-block;
			width: 18px;
			height: 18px;
			border-radius: 50%;
			position: relative;
			transition: all 0.35s ease;
		}
		.btn::after {
			content: "";
			position: absolute;
			top: 4px;
			left: 4px;
			border-radius: 50%;
			width: 6px;
			height: 6px;
			border: 2px solid red;
			border-color: hsla(0,0%,100%,.4);
		}
		.btn:hover {
			background: hsla(0,0%,100%,.2);
		}
		.btn:hover::after {
			content: "";
			background-color: #fff;
		}
	</style>
</head>
<body>
	<i class="btn"></i>
</body>
</html>

语言讲解：利用伪元素选择器器给标签插入内容，我们可以理解为给元素中新插入了一个行内标签。我们可以通过定位，以及其他的css操作来控制新增的内容，来达到我们需要的效果。

三、也可以用用来清除浮动

.clearfix:after {  content: ".";overfolw：hidden； display: block; height: 0; clear: both; visibility: hidden;  }   
.clearfix {*zoom: 1;}

.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  /* 这句话可以触发BFC 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

Jacksong9

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3新增伪元素选择器::before和::after的概念和实际应用（京东banner小点特效）

前言：本人便捷博客能力低下，如果看不懂，请联系我。带来不便，多有抱歉。一、首先我们需要知道css3新增选择器::before和::after的概念E::before和E::after在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。div::befor { content:"开始";}div::after { conte...
复制链接

扫一扫