Bagaimanakah Saya Boleh Membuat Garis Bawah Tebal di Sebalik Teks Menggunakan Span dan CSS?

Garis Bawah Tebal di Sebalik Teks dengan Span dan CSS

Anda ingin mencipta garis bawah tebal di belakang teks "ABC" menggunakan span dan CSS. Anda telah berjaya mencapai garis bawah di bawah teks menggunakan rentang bersarang dengan bahagian bawah sempadan berwarna, tetapi anda bergelut untuk meletakkannya di belakang teks dan di atas garis dasar teks.

Berikut ialah pendekatan lain untuk mencapai dikehendaki kesan:

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;
}

HTML:

<p>
  <span>A</span><span>B</span><span>C</span>
</p>

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