如何確保粗底線在換行時有效?
P粉366946380
P粉366946380 2023-09-05 13:21:47
0
1
452
<p>我正在使用以下程式碼為我的超連結添加更粗/更有樣式的下劃線裝飾。 </p> <pre class="brush:php;toolbar:false;">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; }</pre> <p>然而,只有當我將其轉換為類別並將其作為<code><span></code>添加到每個連結中時,它才能正常工作。如果我嘗試全域實現,當超連結中間有換行時,它就不起作用。當沒有換行時,它能正常工作,但有換行時就不行。 </p> <p>有沒有辦法修復它,以便全域使用,而不必為每個超連結定義<code><span></code>? </p>
P粉366946380
P粉366946380

全部回覆(1)
P粉356128676

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

a {
    border-bottom: 1rem solid;
}

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

border-color: black;
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板