在H5的CSS中,我們可以通過偽元素pseudo-element來添加線條效果。
p::before { content: ""; display: block; border-bottom: 1px solid black; margin-bottom: 10px; }
上述代碼通過使用content屬性為空字符,display屬性設定為block,并在::before選擇器下定義了線條的樣式,即實線、黑色、1像素寬度的邊框線;margin-bottom屬性是為了在段落之間留出一定的間距。
我們還可以通過::after選擇器添加下劃線效果,只需在上述代碼的基礎上稍作修改即可:
p::after { content: ""; display: block; border-bottom: 1px solid black; margin-top: 10px; }
與::before選擇器不同的地方是,我們在此選擇器下定義的是段落結束的位置,因此需要使用margin-top屬性來調整下劃線位置。
上一篇h5加css制作按鈕邊框
下一篇h5動畫css制作