html - 在元素符号编号之外添加左边框以列出元素

Question

我有一个 OL 列表，其中包含编号的 LI 元素。我想在每个单独的 LI 元素周围放置一个左边框。但是，我只能将边框放在元素符号编号的右侧，而我希望它位于左侧。

这是 http://jsfiddle.net/z7gkLnc7/

我想保留 LI 元素周围的 div 包装器。

<ol>
    <div class = "li_wrapper">
        <li>I am a line</li>
    </div>
    <div class = "li_wrapper">
        <li>I am a line</li>
    </div> 
</ol>

样式:

.li_wrapper{
    font-size:20px;
    margin-top:10px;
}

li{
    border-left:red 2px solid;
}

Answer 1

只需使用:

Demo Fiddle

list-style-position: inside;

The list-style-position CSS property specifies the position of the marker box in the principal block box.