在網(wǎng)頁設計中,我們經(jīng)常需要為一些文字添加裝飾性的效果,比如在文字前后加上橫線。使用 CSS 樣式可以輕松地實現(xiàn)這一效果。
/* 在文字前加橫線 */ .text-before { border-top: 1px solid #000; padding-top: 10px; } /* 在文字后加橫線 */ .text-after { border-bottom: 1px solid #000; padding-bottom: 10px; }
上述 CSS 樣式中,我們分別為需要添加橫線的文字元素添加了 class 類名text-before
和text-after
。那么我們在 HTML 頁面中就可以通過調用這些類來實現(xiàn)效果的展示。
<p class="text-before">這是一段文字,文字前有一條橫線</p> <p class="text-after">這是一段文字,文字后有一條橫線</p>
如此,我們就可以實現(xiàn)文字前后的橫線效果了。當然,我們也可以通過更改樣式進行個性化的調整,比如更改橫線的顏色、粗細等等,以達到更好的效果。