CSS可以很方便地實現橫線帶圓點效果，只需要使用偽元素before來生成點以及使用border-bottom屬性來生成橫線即可。

p {
position: relative; /* 父元素要設置相對定位 */
}
p:before {
content: ""; /* 生成偽元素 */
display: block;
position: absolute;
left: -10px; /* 微調位置 */
top: 50%;
margin-top: -2px;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #000;
}
p:after {
content: ""; /* 真正畫線的是after，需要清除浮動 */
display: block;
clear: both; 
border-bottom: 1px solid #000;
}

以上樣式中，偽元素before生成一個4px直徑的黑色圓點，并通過left、top、margin-top屬性進行定位。偽元素after則使用border-bottom屬性生成一條黑色橫線，并通過clear:both清除浮動。最后父元素要設置position:relative，這樣偽元素才能參照父元素進行定位。