Bagaimanakah Saya Boleh Menukar Warna Peluru dalam Senarai HTML Menggunakan CSS Sahaja?-tutorial css-php.cn

Bagaimanakah Saya Boleh Menukar Warna Peluru dalam Senarai HTML Menggunakan CSS Sahaja?

Mary-Kate Olsen

Lepaskan： 2024-12-15 09:22:10

asal

800 orang telah melayarinya

How Can I Change Bullet Colors in HTML Lists Using Only CSS?

Menetapkan Warna Bullet dalam Senarai HTML tanpa Imej atau Elemen Sebaris

Apabila menggayakan senarai tidak tersusun, seseorang mungkin mahu menukar warna peluru tanpa menjejaskan teks item senarai. Semasa hanya menetapkan warna

elemen berfungsi, ia juga menukar warna teks.

Penyelesaian CSS-Sahaja yang Elegan

Jawapannya terletak pada ::sebelum unsur pseudo:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding-left: 1em;
  text-indent: -0.7em;
}

li::before {
  content: "•";
  color: #F00;
}

Salin selepas log masuk

Kod ini mencapai kesan yang diingini tanpa menggunakan imej atau elemen sebaris. Begini cara ia berfungsi:

gaya senarai: tiada; mengalih keluar peluru lalai.
::sebelum mencipta elemen pseudo yang diletakkan sebelum setiap
item.
kandungan: "•" menentukan peluru yang diingini sebagai cakera atau segi empat sama.
warna: #F00; menetapkan warna peluru.
Mengenden teks item senarai dengan padding-left dan text-indent memastikan penjajaran dengan peluru.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menukar Warna Peluru dalam Senarai HTML Menggunakan CSS Sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!