有時候我們需要在頁面中使用一些特殊的分隔符來區分不同的內容或者模塊，比如一個豎線加上一個原點。本文將介紹如何使用 CSS 實現這個效果。

.separator {
display: flex;
align-items: center;
}
.separator::before,
.separator::after {
content: "";
flex: 1;
height: 1px;
background-color: #ccc;
}
.separator::before {
margin-right: 10px;
}
.separator::after {
margin-left: 10px;
border-radius: 50%;
width: 5px;
height: 5px;
background-color: #ccc;
}

上面的代碼使用了 CSS 偽元素和 flex 布局實現了豎線加原點效果。我們創建了一個 .separator 類來作為容器，使用了 align-items 屬性來垂直居中元素。然后使用兩個偽元素 ::before 和 ::after 來分別表示豎線和原點部分。我們將兩個偽元素的高度設為 1px，并使用 flex 屬性將其占據整個容器的寬度（flex: 1）。在豎線部分，我們通過 margin-right 將其與原點分開，原點部分則使用 margin-left 進行調整。最后，我們對原點設置了圓形的邊框半徑，以及寬高為 5px。

使用這個 .separator 類來達到在頁面中分隔不同模塊的效果，可以極大地提高頁面的可讀性和美觀性。