[HTML][CSS] Zła interpretacja listy ze znacznikami HTML Opcje

[Kshyhoo]

Może ktoś mądrzejszy wytłumaczyć mi, dlaczego wykrzacza się numeracja listy?
http://jsfiddle.net/P5dnr/
Jak widać, numerowanie z licznikiem dodaje nową linię.

[RiE]

Za mądrzejszego się nie uważam, ale postaram się wytłumaczyć

To nie licznik dodaje nową linię, tylko znacznik p.
Jeżeli usuniesz licznik, ale nie usuniesz :before to dalej tekst przeskoczy do nowej lini.
Przykład: http://jsfiddle.net/P5dnr/10/


:before tworzy pseudo element, który jest pierwszym dzieckiem.
Zatem Twój kod jest równoważny z tym:

[HTML] pobierz, plaintext 
<li><span>Pierwsze dziecko elementu li</span><p>w znacznikach &lt;p&gt;</p></li> // dwie linie
<li><span>Pierwsze dziecko elementu li</span>bez znaczników &lt;p&gt;</li> // jedna linia
[HTML] pobierz, plaintext 

Znacznik p domyślnie wyświetla się jako blok(display:block), dlatego przeskakuje do nowej lini.
Rozwiązaniem byłoby nadanie display:inline, albo zmiana znacznika p na jakiś 'inline'.