Rumah >hujung hadapan web >tutorial css >Bagaimana untuk menukar warna garis bawah sambil mengekalkan warna teks yang sama?

Bagaimana untuk menukar warna garis bawah sambil mengekalkan warna teks yang sama?

Susan Sarandon
Susan Sarandonasal
2024-11-14 21:03:02987semak imbas

How to Change Underline Color While Keeping Text Color the Same?

Menukar Warna Garis Bawah: Mengasingkan Teks dan Warna Garis Bawah

Untuk mengekalkan warna teks merah sambil menukar warna garis bawah kepada hitam, mari kita teroka penyelesaian yang memanfaatkan sifat CSS3 novel: text-decoration-color.

Dengan sifat ini, kami boleh menetapkan warna yang berbeza pada teks itu sendiri dan hiasan garis bawah, menghapuskan keperluan untuk elemen pembalut tambahan. Berikut ialah coretan kod yang dikemas kini:

p {
  text-decoration: underline;
  -webkit-text-decoration-color: red; /* Safari still uses a vendor prefix */
  text-decoration-color: red;
}
<p>Black text with red underline in one element - no wrapper elements here!</p>

Dengan memanfaatkan sifat teks-hiasan-warna, kita boleh mencapai kesan yang diingini untuk mempunyai teks bergaris hitam tanpa mengorbankan warna teks merah.

Atas ialah kandungan terperinci Bagaimana untuk menukar warna garis bawah sambil mengekalkan warna teks yang sama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn