在CSS中，我們可以用border屬性來給一個元素加上邊框，而常用的值有實線、虛線、點狀和雙實線等。但是你是否有發(fā)現(xiàn)，在一些網(wǎng)頁中，文字間常常會出現(xiàn)一條橫線，這條橫線不是邊框，而是位于文字前后，且前后都有一個小圓圈。

如下圖所示：

點擊這里可以前往<a href="#">百度搜索引擎</a>首頁

這條橫線是如何實現(xiàn)的呢？其實，通過CSS的偽類選擇器，我們完全可以輕松實現(xiàn)這個效果。

首先，我們需要使用before偽元素在文字前添加上這個小圓圈：

a:before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin-right: 5px;
margin-left: 3px;
border-radius: 50%;
background-color: black;
}

其中，通過content屬性來定義偽元素的內(nèi)容為空字符串，通過display屬性將偽元素設(shè)置為行內(nèi)元素，使其能夠在文字前顯示，通過width和height屬性來設(shè)置圓圈的大小，通過margin-right和margin-left屬性來調(diào)整圓圈與文字的間距，通過border-radius屬性來設(shè)置圓圈為圓形，通過background-color屬性設(shè)置圓圈的顏色。

接下來，我們再使用after偽元素來添加橫線：

a:after {
content: "";
display: inline-block;
width: 100%;
border-bottom: 1px solid black;
margin-left: 5px;
margin-right: 7px;
transform: translateY(-50%);
}

其中，通過content屬性來定義偽元素的內(nèi)容為空字符串，通過display屬性將偽元素設(shè)置為行內(nèi)元素，使其能夠與文字在同一行顯示，通過width屬性將橫線的寬度設(shè)置為100%，即讓橫線與文字同寬，通過border-bottom屬性來定義橫線寬度為1px、顏色為黑色，通過margin-left和margin-right屬性來調(diào)整橫線與圓圈的間距，通過transform屬性中的translateY函數(shù)將橫線垂直居中對齊。

最終，我們代碼的效果如下：

點擊這里可以前往<a href="#">百度搜索引擎</a>首頁

完美實現(xiàn)了文字前后橫線圓點的效果！