CSS中間線的實現方法有很多種,但其中一個比較簡單易懂的就是使用偽元素的before或after屬性。
.line { position: relative; padding: 0 10px; } .line:before { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background-color: #000; transform: translateY(-50%); }
代碼中首先給含有中間線的元素.line設置了相對定位,并設置了左右內邊距,為了讓中間線不與元素緊貼在一起。接著,使用before偽元素創建一條寬度為100%、高度為1px的線并設置絕對定位,然后通過transform屬性將其上下移動50%的高度,使其居中對齊。
實現這個效果也可以使用其他的方法,比如設置一個邊框為1px的元素,并將其內邊距壓縮成很小的值,讓邊框顯現出來;或是使用背景定位和重復等屬性實現。總之,只要靈活運用CSS樣式,我們就能實現各種獨具特色的效果啦!