CSS3提供了許多讓網(wǎng)頁設(shè)計(jì)更加美觀的功能,比如帶橫線的標(biāo)題。
/* CSS代碼 */ h2 { position: relative; } h2::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #000; }
以上CSS代碼可以實(shí)現(xiàn)給h2標(biāo)題添加一條底部橫線的效果。首先給h2元素添加相對定位(position: relative),接著使用偽元素(::before)來添加一條絕對定位的元素,寬度為100%并且高度為1px的黑色線條,位置在h2元素的底部。使用偽元素而不是添加一個實(shí)際的元素可以避免HTML結(jié)構(gòu)的復(fù)雜。
還可以進(jìn)一步自定義這條底部橫線的樣式,比如修改顏色、粗細(xì)、位置等等。對于其它標(biāo)簽也可以使用類似的方式來添加橫線。
總之,在平凡的文字標(biāo)題下,添加一條簡單的橫線可以為網(wǎng)頁增添一份美感和細(xì)節(jié),體現(xiàn)出你的用心和設(shè)計(jì)之美。