CSS：Stylable Underline at Baseline

如何添加下劃線到CSS中的內聯元素，即（1.）「stylable」和（2.）在基線上（與只使用border-bottom或box的解決方案不同-陰影）？CSS：Stylable Underline at Baseline

這是爲了響應佈局，所以下劃線必須能夠覆蓋多條線。此外，它不能替代可能與鏈接內聯的任何其他（不是下劃線）文本。

這是一個模擬演示預期的效果。

提前感謝！

來源

2017-10-20 Ood

我想看看這個：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;

來源

2017-10-20 20:02:22 Ood

我不知道爲什麼你不能使用邊框底部，但試試這個：

<!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>

來源

2017-10-20 17:17:03

這不會改變線條的粗細。另外，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>

來源

2017-10-20 20:09:46 zsawaf

CSS：Stylable Underline at Baseline

回答

相關問題