CSS Sortierte Liste Styling :: vor Margins

Question

ich von hier den Code bin mit meiner geordnete Liste http://codepen.io/sawmac/pen/txBhK

HTML

<ol class="custom-counter"> 
<li>This is the first item</li> 
<li>This is the second item</li> 
<li>This is the third item</li> 
<li>This is the fourth item</li> 
<li>This is the fifth item is the fifth item is the fifth item is the fifth item is the fifth item is the fifth item is the fifth item is the fifth item</li> 
<li>This is the sixth item is the sixth item is the sixth item is the sixth item is the sixth item is the sixth item is the sixth item is the sixth item is the sixth item is the sixth item is the sixth item </li> 
</ol> 

CSS

body { 
    font-size: 1.2em; 
    font-family: "Helvetica Neue", Helvetica, sans-serif; 
    margin: 50px; 
} 

.custom-counter { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
} 

.custom-counter li { 
    counter-increment: step-counter; 
    margin-bottom: 10px; 
} 

.custom-counter li::before { 
    content: counter(step-counter); 
    margin-right: 5px; 
    font-size: 80%; 
    background-color: rgb(0,200,200); 
    color: white; 
    font-weight: bold; 
    padding: 3px 8px; 
    border-radius: 3px; 
} 

Wenn der Text für eine zum ursprünglichen Stil Listenelement wird in mehr als eine Zeile eingefügt, der Text wird an den linken Seitenrand verschoben. Ich möchte, dass es mit dem Text darüber übereinstimmt. Hoffentlich kann das Bild unten das besser erklären.

Ich habe versucht, einen linken Rand auf den li CSS hinzufügen, aber das bewegt sich auch die Zahlen.

Jede Hilfe wird geschätzt!

Dank

Answer 1

Verwenden Positionierung auf li und li:before. Wie:

li { 
    position: relative; 
    padding-left: 35px; 
} 

li:before { 
    position: absolute; 
    left: -5px; 
} 

Werfen Sie einen Blick auf das Snippet unten:

body { 
 
    font-size: 1.2em; 
 
    font-family: "Helvetica Neue", Helvetica, sans-serif; 
 
    margin: 50px; 
 
} 
 

 
.custom-counter { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 

 
.custom-counter li { 
 
    counter-increment: step-counter; 
 
    margin-bottom: 10px; 
 
    position: relative; 
 
    padding-left: 35px; 
 
} 
 

 
.custom-counter li::before { 
 
    position: absolute; 
 
    left: -5px; 
 
    content: counter(step-counter); 
 
    margin-right: 5px; 
 
    font-size: 80%; 
 
    background-color: rgb(0,200,200); 
 
    color: white; 
 
    font-weight: bold; 
 
    padding: 3px 8px; 
 
    border-radius: 3px; 
 
}

<ol class="custom-counter"> 
 
    <li>This is the first item</li> 
 
    <li>This is the second item</li> 
 
    <li>This is the third item Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure rem quia et quibusdam dolore impedit porro, velit voluptatibus odit? Rem doloremque quos, officia aut nulla distinctio itaque quisquam excepturi rerum.</li> 
 
    <li>This is the fourth item</li> 
 
    <li>This is the fifth item</li> 
 
    <li>This is the sixth item</li> 
 
    <li>This is the sixth item</li> 
 
    <li>This is the sixth item</li> 
 
    <li>This is the sixth item</li> 
 
</ol

hoffe, das hilft!