Đặt trước một từ vào một số danh sách được sắp xếp

Question

Vì vậy, tôi đã tìm kiếm cao và thấp và không thể tìm thấy câu trả lời cho một số dường như là đơn giản.

Tôi có một danh sách có thứ như thế này:

<ol> 
    <li>Some text here</li> 
    <li>Some more text here..</li> 
    <li>Oh yeah, here's some pretty text</li> 
</ol> 

nào hiển thị:

1. Một số văn bản ở đây
2. Một số văn bản hơn ở đây ..
3. Oh yeah, đây là một số văn bản đẹp

Những gì tôi muốn thực sự hiển thị:

Bước 1. Một số văn bản ở đây

Bước 2. Một số văn bản hơn ở đây ..

Bước 3. Oh yeah, đây là một số khá văn bản

Câu hỏi: Điều này có thể, và nếu có, tôi sẽ làm thế nào mà không sử dụng các giải pháp có vấn đề?

Answer 1

Bạn có thể sử dụng ::before (:before cho IE8) và counter-reset/increment

ol { 
 
    counter-reset: number; 
 
} 
 
li { 
 
    list-style: none; 
 
    counter-increment: number; 
 
} 
 
li::before { 
 
    content: "Step " counter(number) "."; 
 
    position: relative; 
 
    left:-5px 
 
}

<ol> 
 
    <li>Some text here</li> 
 
    <li>Some more text here..</li> 
 
    <li>Oh yeah, here's some pretty text</li> 
 
</ol>