CSS3 ::after伪选择器无法正常生效问题排查求助

代码问题分析 #

你写的::after伪元素不生效的核心原因是：span默认为行内元素，其伪元素默认继承行内元素特性，行内元素设置width、height属性是不会生效的，因此你定义的10px宽高的蓝色圆点实际没有被渲染出来。

修复方案 #

只需要给伪元素增加display属性，将其改为行内块级/块级元素即可，修改后的代码如下：

span::after {
    content: '';
    /* 新增display属性，也可根据布局需求设为block */
    display: inline-block;
    height: 10px;
    width: 10px;
    border: none;
    background-color: #0000ff;
    border-radius: 50%;
    position: relative;
    top: -10px;
    left: -10px;
}

如果需要让这个圆点相对于span容器定位，可以额外给span添加position: relative属性，同时将伪元素的position改为absolute，再调整top、left的偏移值适配你的布局需求即可。

内容的提问来源于stack exchange，提问作者user16780527