使用自定义项目符号时的样式问题

我有这个简单的清单

<ul>
    <li>....</li>
</ul>

和造型

ul {
    list-style: none;
}

li:before {
    background-color: #1282CB;
    border-radius: 6px;
    height: 6px;
    vertical-align: middle;
    width: 6px;
    content: '';
    display: inline-block;
    margin-left: -15px;
}

我的问题（jsfiddle）是，当列表项中的文本跨越多行时，它与左侧的其他文本未正确对齐

绝对定位好子弹后，它可以按我的要求工作（jsfiddle）。没有绝对定位的子弹，是否可以解决此问题？