如何確保粗底線在換行時有效?
P粉366946380
2023-09-05 13:21:47
<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>
最近我也遇到了同樣的問題。我建議你使用border bottom而不是::after。 試試這個:
你也可以使用px來指定大小,而不是rem。如果邊框顏色沒有顯示出來,不要忘記指定邊框顏色