在列表项中添加左边框，位于项目符号编号之外

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

只需使用：

演示小提琴

list-style-position: inside;

list-style-position CSS 属性指定标记框在主块框中的位置。