2016-04-07 7 views
1

Ich habe eine ol Dezimal-Liste Arten mit:CSS: Das Entfernen der Zeit in list-style-type: dezimal

ol li { 
    list-style-type: decimal; 
} 

<ol> 
    <li>First</li> 
    <li>Second</li> 
</ol> 

Die Nummerierung funktioniert gut, aber wie kann ich die Zeit entfernen? Statt zeigt:

1. First 
2. Second 

möchte ich zeigen:

1 First 
2 Second 
+0

Verwenden Sie list-style nicht, eine CSS-Zähler stattdessen verwenden. – CBroe

Antwort

4

Sie werden einen benutzerdefinierten Zähler und generierte Inhalte verwenden müssen. Es gibt kein vordefiniertes , das dieses Format zulässt.

ol { 
 
    counter-reset: list; 
 
    list-style: none; 
 
} 
 
li { 
 
    counter-increment: list; 
 
    position: relative; 
 
} 
 
li:before { 
 
    content: counter(list); 
 
    margin-right: 5px; 
 
    position: absolute; 
 
    right: 100%; 
 
}
<ol> 
 
    <li>one</li> 
 
    <li>two</li> 
 
    <li>three</li> 
 
</ol>