Bagaimana untuk Mencipta Garis Bawah Tebal di Sebalik Teks Menggunakan Bayangan Kotak CSS?

Garis Bawah Tebal di Belakang Teks

Teks menggariskan ialah teknik penggayaan yang biasa digunakan dalam reka bentuk web. Walau bagaimanapun, mencipta garis tebal dan menonjol di bawah teks boleh menjadi mencabar. Isu ini menangani cabaran bukan sahaja menggaris teks, tetapi meletakkan garis bawah tepat di belakang teks itu sendiri.

[Soalan Asal]

Bagaimana anda boleh membuat garis bawah yang muncul di belakang teks menggunakan rentang dan CSS?

[Diperbaiki Jawapan]

Pendekatan alternatif untuk mencapai garis bawah tebal di belakang teks ialah melalui penggunaan bayangan kotak:

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>
  <span>A</span><span>B</span><span>C</span>
</p>

Kaedah ini mencipta bayang yang memberikan penampilan garis tebal tepat di belakang teks, tanpa menjejaskan kedudukan atau kandungan teks.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Garis Bawah Tebal di Sebalik Teks Menggunakan Bayangan Kotak CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!