如何確保粗底線在換行時有效？

Question

我正在使用以下程式碼為我的超連結添加更粗/更有樣式的下劃線裝飾。

a { text-decoration: none; position: relative;}

a:hover { color: #c0632e; }

a::after { content: ""; position: absolute; width: 100%; height: 30%;
        bottom: 0; left: 0; background-color: #2EB0C0;
        opacity: 0.15; z-index: -1; }
    
a:hover::after { background-color: #c0632e; }

然而，只有當我將其轉換為類別並將其作為添加到每個連結中時，它才能正常工作。如果我嘗試全域實現，當超連結中間有換行時，它就不起作用。當沒有換行時，它能正常工作，但有換行時就不行。

有沒有辦法修復它，以便全域使用，而不必為每個超連結定義？

Answer 1

最近我也遇到了同樣的問題。我建議你使用border bottom而不是::after。 試試這個：

a {
    border-bottom: 1rem solid;
}

你也可以使用px來指定大小，而不是rem。如果邊框顏色沒有顯示出來，不要忘記指定邊框顏色

border-color: black;