我最早接触到CSS中的伪元素是在一次写背景模糊的时候，CSS中的blur会模糊下面所有的元素，但是可以通过伪元素在before中先模糊，这样下层是没有任何元素的，自然也不会有元素被模糊。
伪元素就如同它的名字一样，是假的元素，只是CSS引擎在排版的时候创建出来的，在DOM树中是不存在的，所以javascript是没办法操作伪元素的。伪元素分为before和after，可以在元素的前面或者后面创建一个假的元素，伪元素选择器的标志符号是::。
div::before 在div元素的前面创建一个元素，配合content属性一起使用。div::after 在div元素的后面创建一个元素，配合content属性一起使用。
使用伪元素选择器需要注意一点的是，必须使用content属性，否则将不起任何作用。
伪元素选择器生效以后，可以在DOM中看到::before或者::after，这里提供一个例子。
html部分：
1
2
3
4
5
| <body>
<div>
Text
</div>
</body>
|
css部分：
1
2
3
4
5
6
7
| div::before {
content: "This is before Text, ";
}
div::after {
content: ", This is after Text.";
}
|
此时页面上会看到输出这么一句话，This is before Text, Text , This is after Text.，并且使用鼠标只能选择到最中间的Text文本。
代码可以点击这里查看。
今天写这篇文章呢，是因为今天我在实现hexo的Next主题，看到它在列表中使用after创建了一个小圆点，并且我遇到了一个问题，所以写这篇文章记录一下。
Next用的是浮动布局来实现的，而我决定flex一把梭，整体布局是垂直的flex，首页、分类等列表内部是用水平的inline-flex实现的，最左边是图标，来自fortawesome，中间的文本使用span包裹一下，实现左对齐，然后通过伪元素在最右边创建一个小圆点，设置a元素的宽度为100%，就可以实现圆点在最右边。
坑就是在这里遇到的，如果a元素的宽度设置为100%，伪元素创建的小圆点就不能完全显示，少1像素或者多1像素就可以完全显示。最终的解决办法是给小圆点的周围增加了1像素的padding解决了，但是原因位置，谁看到这篇文章并且恰好知道原因的，还请帮忙评论回复一下。
1
2
3
4
5
6
7
8
9
10
11
12
| <div id="site-nav">
<ul>
<li v-for="item in items" v-bind:key="item.title">
<a v-bind:href="item.link">
<span id="menu-left" v-bind:class="item.class"></span>
<span id="menu-text">
{{ item.title }}
</span>
</a>
</li>
</ul>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
| #site-nav {
background: white;
padding: 20px 0;
}
ul {
margin: 0;
padding: 0 0;
}
#site-nav li {
list-style-type: none;
}
#site-nav li a {
padding: 5px 0px;
text-align: left;
line-height: inherit;
transition-property: background-color;
transition-duration: 0.2s;
transition-timing-function: ease-in-out;
transition-delay: 0s;
display: flex;
justify-content: space-between;
align-items: center;
text-decoration: none;
font-size: 13px;
border-bottom: 1px solid transparent;
color: #555;
}
#site-nav li a:hover {
background: #f9f9f9;
}
#menu-left {
align-content: center;
margin-left: 10px;
}
#menu-text {
width: 100%;
margin-left: 10px;
}
#site-nav li a::after {
content: ' ';
background: #bbb;
width: 6px;
height: 6px;
border-radius: 50%;
margin: 0 10px 0 0;
min-width: 6px;
min-height: 6px;
max-height: 6px;
max-width: 6px;
display: block;
box-sizing: border-box;
}
|
但我提取了基本结构和css，demo是能够正常显示小圆点的，但是自己的Vue却不能正常显示，后来发现是display写成块级元素用的flex了，改成inline-flex就能正常显示了，但是在调整宽度的时候，就发现了上面的问题，它又不正常显示了，实在解决不了了，就用padding处理了。
参考资料： 千古壹号