使用伪元素创建一个圆点

我最早接触到CSS中的伪元素是在一次写背景模糊的时候,CSS中的blur会模糊下面所有的元素,但是可以通过伪元素在before中先模糊,这样下层是没有任何元素的,自然也不会有元素被模糊。

伪元素就如同它的名字一样,是假的元素,只是CSS引擎在排版的时候创建出来的,在DOM树中是不存在的,所以javascript是没办法操作伪元素的。伪元素分为before和after,可以在元素的前面或者后面创建一个假的元素,伪元素选择器的标志符号是::

  1. div::before 在div元素的前面创建一个元素,配合content属性一起使用。
  2. 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处理了。

参考资料: 千古壹号


使用伪元素创建一个圆点
https://blog.justforlxz.com/2020/01/01/使用伪元素创建一个圆点/
作者
小竹
发布于
2020年1月1日
许可协议