list-style și ::marker în CSS

list-style: none;
list-style: square inside;
list-style-type: decimal-leading-zero;
list-style-type: "✓ ";      /* șir de caractere propriu */
li::marker { color: #16a34a; }

Ce face list-style și ::marker

list-style este prescurtarea pentru list-style-type (forma bulinei sau a numărului), list-style-position (în afara sau în interiorul textului) și list-style-image (o imagine ca bulină).

list-style-type acceptă și un șir de caractere, de exemplu "✓ " sau "→ " (Chrome 79, Firefox 39, Safari 14.1).

Pseudo-elementul ::marker stilizează direct bulina sau numărul: culoare, mărime, font, chiar și content. În Safari suportul este parțial: culoarea și fontul merg, alte proprietăți nu.

Valori uzuale

Valoare	Descriere
disc / circle / square	Bulină plină / cerc gol / pătrat.
decimal / decimal-leading-zero	1, 2, 3 / 01, 02, 03.
lower-alpha / upper-roman	a, b, c / I, II, III.
"text"	Orice șir de caractere ca marcaj.
outside / inside	Marcajul stă în afara textului (implicit) / în interiorul primului rând.
none	Fără marcaj.

Exemple

Exemplul 1: Listă de beneficii cu bifă verde

Un șir propriu în list-style-type și ::marker pentru culoare.

.beneficii {
  list-style-type: "✓ ";
}
.beneficii li::marker {
  color: #16a34a;
  font-weight: 700;
}

Efect vizual în browser

Fiecare rând („Livrare gratuită peste 200 lei”, „Retur în 30 de zile”) începe cu o bifă verde îngroșată, iar textul rămâne în culoarea normală.

Exemplul 2: Meniu de navigare fără buline

Meniurile sunt liste în HTML, dar nu trebuie să arate ca liste.

.meniu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
}
/* <ul class="meniu" role="list">...</ul> */

Efect vizual în browser

Linkurile „Acasă”, „Produse”, „Contact” stau pe un rând, fără buline și fără spațiul din stânga pe care browserul îl pune implicit listelor.

Greșeli frecvente

• Eliminarea bulinelor cu list-style: none fără padding: 0; lista rămâne mutată spre dreapta cu aproximativ 40px.
• Ignorarea faptului că Safari cu VoiceOver nu mai anunță ca listă un <ul> cu list-style: none; adaugă role=”list” când contează.
• Construirea bulinelor cu ::before când ::marker sau list-style-type: „…” ar fi suficiente.

Comenzi înrudite

• Contoare CSS (counter-reset, counter-increment, counter()): Numără automat elemente cu CSS și afișează numărul prin ::before, de exemplu „Pasul 1”, „Pasul 2” sau capitole 1.1, 1.2.
• Pseudo-elemente (::before, ::after, ::placeholder): Creează elemente decorative virtuale în pagină fără HTML suplimentar sau stilizează părți specifice ale unui element.
• text-indent: Adaugă un spațiu înaintea primului rând dintr-un paragraf, ca alineatele din cărți.