a { text-decoration: none; /* 去掉链接下划线 */ border-bottom: 1px solid #ccc; /* 添加横线 */ }
上面这段代码可以让所有链接的下划线消失,并在链接正下方添加一条灰色的横线。
如果只想针对某个链接添加横线,可以通过给链接添加类名的方式,来实现自定义样式。
自定义横线链接.custom-link { text-decoration: none; border-bottom: 2px solid red; /* 添加2像素宽度的红色横线 */ }
上面这个例子可以让名为“自定义横线链接”的链接增加一个红色的横线,宽度为2像素。
总之,在CSS中使用标签横线是非常方便的,可以为链接增加美观的效果,提升用户体验。