一、来个小小的叙事先：
一段时间之前在跟着boss做一个项目的时候boss教了我一个偷懒的技巧，嘛，当时还是刚入门啥都不会啊，学个偷懒的技巧什么的我在心里还真是默默的吐槽了一下。boss说有些页面写的时候可以通过写after或before的伪类来达到页面的效果，例如说写表单时label后面可以加如 “*密码由数字，字母和下划线组成 ” 的红色注意标语。或者加个小图标啥的，然后他又笑呵呵的说：“写了这些之后别人还不一定知道你这效果是怎么实现的”，不看控制台的话，若是当初的我肯定想着这一定是在元素的后面加了span然后写一段恼人的定位样式什么absolute啊什么relative啊之类的，但当一看控制台却发现你还不能直接 高亮 到这部分，然后好奇的自己只能点击它的“父类”看看这咋实现的，一看这样式，这才知道全写到伪类去了。。我心想着：呵呵，这懒偷得真好，还能装装逼，服了。。
说真话，这也不是偷懒，这是技巧，能方便人的东西都是好东西，更别说coder更加注重方便性了。
二、after与before
其实after与before用法是一样的，只是显示的位置不一样而已。那这里就举after为例好了。
:after 选择器在被选元素的内容后面插入内容。这是它的定义吧。它有一个属性 content 这属性意味着这元素后面要插入什么内容。图文并茂才容易理解，上图。
<!DOCTYPE html>
<html>
<head>
<title>demo1</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<div id="1" class="box">div容器</div>
<div id="2" class="box">hahaha</div>
<div id="3" class="box">hhhh</div>
<div id="4" class="box">23333</div>
</body>
</html>.box{
margin: 20px;
font-size: 28px;
}
.box:after{
content: 'hi';
font-size: 14px;
margin-left: 10px;
}
.box:before{
content: "hello";
color: #888;
font-size: 12px;
margin-right: 10px;
}
这张截图就是上面代码效果，不要介意这个背景颜色不是白色，但样式里面没写，这是我浏览器设置的背景颜色，如图示，这只要带有class=“box”的元素都会带上hi，这是伪类after，那么顾名思义的这个hello，就是before的伪类的效果，很容易理解吧。
三、什么东西只要用到就得看看说明书，这东西我们要注意使用规范，别弄到自己狼狈还怪这东西的问题。
这after和before有什么要注意的。我们的思考能力让这个注意点有很多可能。
1.：after和：before 说：只要你用到我，你就得把我的属性content带上，不然我给你干活。这after跟before就一个属性content，所以必须带上它，不然失去了content的意义了。如果不写content，那不好意思，不能显示你要插入的东西。即使你的content为空。
如若不信，且看看下面的。html同样的，我就把.box：after改了下，去掉了content属性
.box{
margin: 20px;
font-size: 28px;
}
/*.box:after{
content: 'hi';
font-size: 14px;
margin-left: 10px;
}*/
.box:before{
content: "hello";
color: #888;
font-size: 12px;
margin-right: 10px;
}
.box:after{
border:#00f solid 5px;
border-width: 5px 5px 0 0 ;
}
显然跟前面的那张图比较，这张图中.box的元素后面看不到after的样式，这理应在上边和右边有蓝色的粗线的边框，然而没有了。若我就要求没有content，我不需要加内容只加样式，那麻烦把content以空的形式写进去。
.box:after{
content:"";
border:#00f solid 5px;
border-width: 5px 5px 0 0 ;
}
这就出来了嘛，然后你再看清楚些，却发现这也不是border-width：5px 5px 0 0；的样式，说好的右上边框呢？那是因为你的content啥都没有，没有宽度怎么实现右上边框啊。。
.box:after{
content:"hi!";
border:#00f solid 5px;
border-width: 5px 5px 0 0 ;
}
这不就出现右上边框了嘛。
2.这content是个好东西，不只是字符串，它用途丰富啊！
content有四种可以写进去的东西：attr(attr-name)、字符串、url()/uri()、counter()
字符串不解释。说说剩下的几个好了。
-
attr(attr-name), 伪元素的内容跟主元素的某个属性值进行关联，及其内容为主元素的某指定属性的值好处：可以通过js动态改变主元素的指定属性值，这时伪元素的内容也会跟着改变，可以实现某些特殊效果，如图片加载失败用一段文字替换。
-
url()/uri(), 引用外部资源，例如图片； -
counter(), 调用计数器，可以不使用列表元素实现序号问题。
文字不好说明，这里给出些例子。
1）、attr()
.box:after{
color: green;
content: attr(id);
margin-left: 10px;
}
这里面content是关联了元素的id属性，凡是还有box的类都在后面打印出它们各自的id值，当然 这 attr属性可以是自己自创的属性名，只要在对应元素中写入这个属性名就好
content: attr(user_id);<body>
<div user_id="1" class="box">div容器</div>
<div user_id="2" class="box">hahaha</div>
<div id="3" class="box">hhhh</div>
<div id="4" class="box">23333</div>
</body>
由于content是属性名为user_id的值，所以 id 的值就没有显示。
2）、url()
好了url()这东西就麻烦了，有点不周到啊，至于哪里不周到往下再说，先说它咋用。明着让你写个路径嘛，那我来张图片
.box:after{
content: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533007514&di=f8906b4a9c54204496739ddd5047df95&imgtype=jpg&er=1&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F34%2F96%2F23573bca52a6b30.jpg");
margin-left: 10px;
}
哇，这图片大得惊人，看着难受啊，这就是不周到的地方，如果content的值是url（图片地址）的话，该图片的大小你是改不了的，我试过设置宽度高度，但没有效果，原图多大就显示多大，真糟心。我这截图都截不全。没事这有解决办法。如下：
.box:after{
content:"";
background:url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533007514&di=f8906b4a9c54204496739ddd5047df95&imgtype=jpg&er=1&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F01%2F34%2F96%2F23573bca52a6b30.jpg") no-repeat center;
display:inline-block;
background-size:30px;
width:30px;
height:30px;
margin-left: 10px;
}
因为直接用content不能控制图片大小，所以把图片变成背景图片，然后用background-size就能控制图片大小了。这里width:30px;height:30px;也是必要的，不然图片也是不能显示出来，因为content为空就相当于没有宽度，背景图片是不能被渲染出来的。display：inline-block可以换成block，不过效果的话图片就会跑到下一行，但不能没有这个display样式。还有background-size不要不写，如果不明确background-size，但又保留了width和height，那图片只能显示其中的一部分
3）、counter略有微复杂，还包括counter-reset，counter-increment 等
body{
counter-reset: boxnum;
}
.box:after{
counter-increment: boxnum;
content:"(" counter(boxnum) ")";
margin-left: 10px;
} 
其实这个counter()不只是用在伪类上面，这是css3里面的样式函数，哪都能用，具体的自己去了解一下这个函数吧。有些地方这个函数我也不清不楚的，就不说了。
最常用的应该是这四种情况的了。
3.其他知识点
1）伪元素即伪类，它是一个元素的子元素，其意思就是说，我们无法用JS获取到这些伪元素，我们无法通过JS对其进行增、删、改，所以这也是它们的优点，因为它们不会增加JS查询DOM的负担，即对于JS来说伪元素是透明的。然后因为它们也不是实际的HTML标签，所以可以加快浏览器加载HTML文件，对SEO也有帮助（SEO 搜索引擎优化）。
2）如果我们把伪类的样式有absolute定位的话会把伪类强制变成块级元素，伪类本身是行内元素的。
3）img、input和其他的单标签是没有after和before伪元素的，因为单标签本身不能有子元素。
上述总结自《高效前端》。
伪类使用起来是很方便的，在写页面的时候它能够简化页面的HTML标签，如果能善于使用伪元素，这能够大大使我们所写的页面更加简洁优雅，并且还能默默的装一下逼，这代码看上去更加高大上（笑）。伪元素好用但也不能滥用，毕竟这伪类只是页面辅助性视觉元素，重点是视觉性的，这可不能因为能省事就滥用伪元素，如果内容本身是页面内容，需要有动态交互的话就不要用伪元素了。
1757
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
