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

本文链接：https://blog.youkuaiyun.com/qq_37120738/article/details/84209077

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

一、首先我们需要知道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: abso