css：三个水平点使用：before和：after

Question

我想展示三个水平点（我在jsfiddle上做了一个演示）

span {
    position: relative;
    background-color: blue;
    border-radius: 5px;
    font-size: 0;
    margin-left: 20px;
    padding: 5px;
}

span:before {
    position: absolute;
    left: -10px;
    content: '';

    background-color: green;
    border-radius: 5px;
    font-size: 0;  
    margin-left: 35px;

    padding: 5px;
}

span:after {
    position: absolute;
    right: 0;
    content: '';
    background-color: grey;
    border-radius: 5px;
    font-size: 0;  
    margin-left: 35px;

    padding: 5px;
}  

我不知道这是否是实现这一目标的最佳方法。另外，我希望它们水平排列。而且我不明白为什么他们不是。有任何建议如何解决这个问题？

Answer 1

由于您使用absolute定位，您可以使用top属性垂直定位伪生成内容，并使用left属性进行水平对齐

<强> Example Here

span:before {
    position: absolute;
    left: -20px; /* <-- align the circle horizontally */
    top: 0;      /* <-- Added declaration             */
    content: '';

    background-color: green;
    border-radius: 5px;
    font-size: 0;
    padding: 5px;
}

span:after {
    position: absolute;
    left: 20px; /* <-- align the circle horizontally */
    top: 0;     /* <-- Added declaration             */
    content: '';
    background-color: grey;
    border-radius: 5px;
    font-size: 0;    
    padding: 5px;
}

在这种情况下，不需要使用margin伪元素。

此外，您可以避免left属性的负值，以使圆圈显示在右侧。 （的 Example Here ）。

Answer 2

//在

之后使用left而不是right

span {
    position: relative;
    background-color: blue;
    border-radius: 5px;
    font-size: 0;
    margin-left: 20px;
    padding: 5px;
}

span:before {
    position: absolute;
    left: -10px;
    content: '';
    top: 0;
    background-color: green;
    border-radius: 5px;
    font-size: 0;  
    margin-left: 35px;

    padding: 5px;
}

span:after {
    position: absolute;
    left: 10px; //using left instead of right
    content: '';
    background-color: grey;
    border-radius: 5px;
    font-size: 0;  
    margin-left: 35px;
    top: 0;

    padding: 5px;
}

Answer 3

检查此 jsFiddle

HTML

<span></span>

CSS

span {         位置：相对;         背景颜色：蓝色;         border-radius：5px;         font-size：0;         margin-left：20px;         填充：5px;     }

span:before {
    position: absolute;
    left: -20px;
    top: 0;
    content: '';

    background-color: green;
    border-radius: 5px;
    font-size: 0;
    padding: 5px;
}

span:after {
    position: absolute;
    left: 20px;
    top: 0;
    content: '';
    background-color: grey;
    border-radius: 5px;
    font-size: 0;    
    padding: 5px;
}