Bagaimana untuk Mencipta Garis Bawah Hitam dengan Teks Merah Menggunakan CSS3?

Mengubah Warna Garis Bawah Tanpa Menjejaskan Warna Teks

Dalam coretan kod yang disediakan, anda telah mencipta teks bergaris bawah menggunakan teg HTML. Walaupun teks itu sendiri berwarna merah, anda cuba memisahkan warna garis bawah kepada hitam. Mari terokai penyelesaian CSS3 untuk cabaran ini.

Memperkenalkan warna-warna-teks

CSS3 kini memperkenalkan sifat warna-hiasan-teks, menyelesaikan dilema anda. Dengan sifat ini, anda boleh memanipulasi warna hiasan teks (seperti garis bawah) tanpa menjejaskan teks itu sendiri.

Mencipta Garis Garis Hitam dengan Teks Merah

Untuk mencapai output yang anda inginkan, laksanakan sifat CSS berikut:

p {
  text-decoration: underline;
  -webkit-text-decoration-color: red; /* safari still uses vendor prefix */
  text-decoration-color: red;
}

Gunakan CSS ini pada elemen HTML sebagai berikut:

<p>black text with red underline in one element - no wrapper elements here!</p>

Akibatnya, teks anda akan kekal merah, manakala garis bawah akan diwarnakan hitam, memberikan anda kesan yang diingini tanpa menggunakan pembalut tambahan.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Garis Bawah Hitam dengan Teks Merah Menggunakan CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!