CSS：Stylable Underline at Baseline

问题描述：

如何添加下划线到CSS中的内联元素，即（1.）“stylable”和（2.）在基线上（与只使用border-bottom或box的解决方案不同-阴影）？CSS：Stylable Underline at Baseline

这是为了响应布局，所以下划线必须能够覆盖多条线。此外，它不能替代可能与链接内联的任何其他（不是下划线）文本。

这是一个模拟演示预期的效果。

提前感谢！

我想看看这个：https://css-tricks.com/styling-underlines-web/。 –

@DerekBrown感谢您的评论！文章看起来很有希望。 – Ood

答

对于大家感兴趣的话，这是我想出了一个解决方案。它只能在坚实的背景下工作。

background: linear-gradient(white, white), linear-gradient(blue, blue); 
background-position: 0px calc(1em + 5px), 0px 1em; 
background-repeat: repeat-x; 
color: black; 
background-color: white;

答

我不知道为什么你不能使用边框底部，但试试这个：

<!DOCTYPE html> 
<html> 
    <style> 
    </style> 
    <body> 
     <a><u>LINK OVER </u><br><u>MULTIPLE</u> LINES</a><br><br> 
     <a><span style="border-bottom: blue solid 3px;">LINK OVER 
<br>MULTIPLE</span> LINES</a><br><br> 
     <a><span style="text-decoration: underline; text-decoration-color: 
blue;">LINK OVER<br>MULTIPLE </span> LINES</a> 
    </body> 
</html>

这不会改变线条的粗细。另外，text-decoration-color不是一个跨浏览器的解决方案。 – Ood

答

我想你会想用一个伪元素来设计你的下划线。我也在悬停中投掷了一个简单的动画，以展示其灵活性。

h1 { 
 
    position: relative; 
 
} 
 

 
h1::before { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    background: aqua; 
 
    height: 2px; 
 
    width: 200px; 
 
    transition: width 0.3s; 
 
} 
 

 
h1:hover::before { 
 
    width: 300px; 
 
}

<h1>This is a styleable baseline</h1>

CSS：Stylable Underline at Baseline

相关推荐