如何使用 CSS 在文字後面建立粗底線？

Barbara Streisand

發布： 2024-12-24 02:33:14

原創

410 人瀏覽過

How Can I Create a Thick Underline Behind Text Using CSS?

使用CSS在文字後面建立粗下劃線

要使用span和CSS實現文字後面粗下劃線的效果，有一個您可以使用的一些技巧：

選項1：嵌套Spans

此方法涉及嵌套一系列Span，每個Span 的底部邊框的大小和顏色都逐漸增加：

<p>

登入後複製

選項2：盒狀陰影

另一個選項是使用框陰影來創建underline:

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

登入後複製

使用這些方法，您可以在文本後面創建粗下劃線的錯覺，位於基線之上或之下。

以上是如何使用 CSS 在文字後面建立粗底線？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

來源：php.cn

上一篇：如何使用 Flexbox 將元素底部對齊？下一篇：單獨使用 CSS 可以停用超連結嗎？

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章