在网页设计中,常常需要给一些文本加上横线来突出重点,这时候,我们可以使用CSS的text-decoration属性来实现。首先,我们可以使用text-decoration属性来给文本添加下划线:p {
在网页设计中,常常需要给一些文本加上横线来突出重点,这时候,我们可以使用CSS的text-decoration属性来实现。
首先,我们可以使用text-decoration属性来给文本添加下划线:
p { text-decoration: underline; }
这样,页面中的所有段落都会有下划线。
接下来,我们可以使用伪元素::before和::after来给文本增加左右两边的横线:
p { position: relative; } p::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; border-top: 1px solid #ccc; } p::after { content: ""; position: absolute; top: 50%; left: 0; right: 0; border-bottom: 1px solid #ccc; }
这里,我们将p元素的position属性设为relative,然后使用伪元素::before和::after来添加上下边框,通过绝对定位将它们放在文本的上下两侧。
这样,我们就可以把一段文本用两条横线夹在中间来进行标识了。
粉丝
0
关注
0
收藏
0