如何使用 CSS 創建延伸到文字後面的粗下劃線效果？

<p>

<p>使用CSS 和Spans 在文字後面建立粗下劃線

<p>要實現所提供圖像中看到的粗下劃線效果，請使用Span的組合可以使用CSS 屬性。

<p>解決方案巴塞姆·邊框底部：

<p>主要方法包括為每個字元建立嵌套跨度並套用具有不同厚度的實心邊框底部。透過垂直定位跨度，可以實現文字下方多行的效果。但是，此方法不會擴展文字後面的下劃線。

<p>HTML:

<p>

<p>解bashyum box-shadow:

<p>替代方案是利用具有負值的box-shadow 屬性來創造文字後面的粗底線的錯覺。透過設定 inset 屬性，陰影向內投射，在文字下方建立一條實線。

<p>CSS:

p {
  font-size: 100px;
  font-family: arial;
}

span {
  padding: 0 10px;
  box-shadow: inset 0 -0.4em 0 0 magenta;
}

span:nth-child(2) {
  box-shadow: inset 0 -0.55em 0 0 magenta;
}

span:nth-child(3) {
  box-shadow: inset 0 -0.7em 0 0 magenta;
}

<p>HTML:

<p>
  ABC

<p>此方法有效地在文字後面建立粗底線，而不影響其基線位置。

以上是如何使用 CSS 創建延伸到文字後面的粗下劃線效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！