css - 用 :after 但最后用圆圈创建线条的最佳方法是什么？

Question

那么，我怎样才能在那些元素（西红柿......等）之后创建那些行，但我还需要在每行的末尾圈？

我试过这种方式但没有圈，因为我找不到任何方法！：

.h1:after{
content: "";
position: absolute;
height: 0.5em;
width: 95px;
margin-top: 13px;
border-top: 2px solid black;
margin-left: 20px;}

标签： csslineborderarrows

Answer 1

您可以通过使用 ::before 元素设置一些边框样式来获得一个圆圈。您可以通过设置边框高度（此处为 10 像素）来调整圆的大小，并将半径设置为 50%，使其完全变圆。您可以使用顶部/左侧属性定位它。

.h1::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 10px solid black;
    left: 293px;
    top: 24px;
}