Bagaimanakah Saya Boleh Mencipta Kesan Garis Bawah Tebal Melanjutkan Di Sebalik Teks Menggunakan CSS?

<p>

<p>Mencipta Garis Bawah Tebal di Sebalik Teks Menggunakan CSS dan Span

<p>Untuk mencapai kesan garis bawah tebal yang dilihat dalam imej yang disediakan, gabungan span dan sifat CSS boleh digunakan.

<p>Penyelesaian باستخدام border-bottom:

<p>Pendekatan utama melibatkan mencipta rentang bersarang untuk setiap aksara dan menggunakan sempadan bawah pepejal dengan ketebalan yang berbeza-beza. Dengan meletakkan rentang secara menegak, kesan berbilang baris di bawah teks dicapai. Walau bagaimanapun, kaedah ini tidak memanjangkan garis bawah di belakang teks.

<p>HTML:

<p>

<p>Penyelesaian باستخدام box-shadow:

<p>Alternatif pendekatan adalah untuk menggunakan sifat kotak-bayang dengan nilai negatif untuk mencipta ilusi garis bawah tebal di belakang teks. Dengan menetapkan sifat inset, bayang-bayang dilemparkan ke dalam, mewujudkan garis pepejal di bawah teks.

<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>Kaedah ini berkesan mencipta garis bawah tebal di belakang teks tanpa menjejaskan kedudukan garis dasarnya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Kesan Garis Bawah Tebal Melanjutkan Di Sebalik Teks Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!