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ę.

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'.

No to się już dowiedziałem i kombinowałem a display: inline, ale do tej pory bez rezultatu. Muszę przerobić na coś w stylu klasa.ol klasa li
Znalazłem dwa przykłady, które działają zgodnie z moim zamysłem, czyli po DIV class="tutek" następuje automatyczne numerowanie list bez nadawania odrębnych klas
http://fiddle.jshell.net/Gbf6u/
http://jsfiddle.net/audetwebdesign/wsmnJ/

A jak zrobisz tak:

[HTML] pobierz, plaintext 
.tutek2 > ol > li:first-child p {
    display:inline-block;
}
[HTML] pobierz, plaintext 

to też nie pomaga?

No właśnie znacznik P jest elementem blokowym.

No tak, a display:inline-block robi z elementu blokowego, element "blokowo-liniowy" Czyli można mu nadać szerokośc i wysokość, marginesy tak jak blokowemu, ale w przeciwieństwie do blokowego nie "przeskakuje" do nowej linii.

Kurde, działa
http://jsfiddle.net/P5dnr/12/

Kurcze, działa na przykładzie ale na stronie bez zmian ;(

[HTML] pobierz, plaintext 
    .tutek2 > ol > li:first-child p {
    display:inline-block;
    }
[HTML] pobierz, plaintext 

Powyższa reguła odnosi się tylko do pierwszego elementu li, w przypadku kiedy n-ty znacznik li ma w sobie p, nie zadziała.

[HTML] pobierz, plaintext 
    .tutek2 > ol > li > p {
    display:inline-block;
    }
[HTML] pobierz, plaintext 

Dla wszystkich elementów li, których potomek to p

Ale to wykrzacza resztę:
http://jsfiddle.net/P5dnr/14/

http://jsfiddle.net/P5dnr/15/

Chodzi Ci o taki efekt?

Bądź ustawiając szerokość: http://jsfiddle.net/P5dnr/16/

Tylko, że to nie działa dobrze, przesuwa numerek z dół.
http://jsfiddle.net/P5dnr/17/

Chyba zmogłem problem:
http://jsfiddle.net/P5dnr/18/

http://jsfiddle.net/P5dnr/19/

dla .tutek1 > ol > li:before {vertical-align:top;} i dla elementów w środku <li> {margin-top:0} - przez to Ci się trochę zmniejszą odstępy (o 10px chyba?) więc możesz o 10px powiększyć np. margin-bottom tych elementów. Tak bym jakoś kombinowal

EDIT:
Ok, widzę że już dałeś rade Git

No właśnie nie wszystko działa jak należy. Tym sposobem przestało mi numerować listy zagłębione, w tym również w znacznikach PRE.
http://jsfiddle.net/P5dnr/22/

Wstawianie licznika masz zdefiniowane tylko i wyłącznie dla:

[CSS] pobierz, plaintext 
.tutek1 > ol > li:before,
.tutek2 > ol > li:before
[CSS] pobierz, plaintext 

w przedstawionym przykładzie.

No jasne, w zimowy sen zapadłem. Chyba czas na wakacje

Kuleje mi nadal numerowanie listy w znaczniku PRE: http://jsfiddle.net/P5dnr/26/. Numerowanie powinno być wyrównane do prawej a jest do lewej.