Bagaimana Menggayakan Senarai HTML dengan Penanda Senarai Dash Menggunakan CSS?

Menggayakan Senarai HTML dengan Penanda Senarai Pemuka

Dalam HTML, jenis gaya senarai lalai ialah "cakera", yang menghasilkan titik tumpu . Untuk membuat senarai dengan penanda sempang sebaliknya, anda boleh menggunakan CSS.

Satu penyelesaian ialah menggunakan sifat text-indent untuk mengesot item senarai dan kandungan sifat :sebelum pseudo-elemen untuk memasukkan aksara sempang.

Contoh:

<code class="css">ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}</code>

HTML:

<code class="html"><ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul></code>

Hasil:

- First
- Second
- Third

Pendekatan ini membolehkan anda mengekalkan kesan senarai inden sambil menambah penanda sempang.

Penanda Senarai Generik:

Anda boleh menggunakan mana-mana aksara Unikod sebagai penanda senarai dengan menetapkan sifat kandungan bagi :sebelum elemen pseudo kepada kod entiti HTML aksara yang dikehendaki. Contohnya, untuk menggunakan asterisk (*), gunakan:

<code class="css">ul > li:before {
  content: "*";
}</code>

Atas ialah kandungan terperinci Bagaimana Menggayakan Senarai HTML dengan Penanda Senarai Dash Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!