CSS是一種常用的網(wǎng)頁樣式語言,支持許多效果與功能。其中一個很有用的特性,是在換行文字下添加線條。
具體的做法是使用CSS的text-decoration屬性,值為underline或overline。下面的代碼演示了一個段落中,兩個不同的換行文字加下劃線和上劃線的效果:
p { text-decoration-line: underline; /* 添加下劃線 */ text-decoration-color: red; /* 下劃線顏色為紅色 */ } br { display: inline; /* 將換行標志轉換為行內元素 */ } p:nth-of-type(2) { text-decoration-line: overline; /* 添加上劃線 */ text-decoration-color: blue; /* 上劃線顏色為藍色 */ }
其中,text-decoration-line用來定義什么類型的線條,text-decoration-color則是線條的顏色。br元素需要設置display:inline,這樣才能被認為是一個行內元素,在文字中間劃線。最后一個規(guī)則,使用了:nth-of-type偽類選擇器,用于匹配第二個段落,將上劃線的效果應用于其中所有的換行文字。
如果你想要添加其他類型的線條,可以使用text-decoration-style屬性。它支持solid、double、dashed、dotted和wavy五種線型。
以上就是在CSS中給換行文字加線的方法。這個技巧可以用于強調某些特定的文字,讓閱讀者更加易于理解。如果你有需要,也可以試試在其他位置添加線條。