html - 使用 li :before? 时如何正确调整元素符号大小

Question

我正在使用以下方法来减少元素符号和 <li> 之间的空间元素。即使在 IE8 上，它也可以跨浏览器工作。

唯一的问题是，如果我尝试使用 font-size 参数修改大小，如 Demo ，您会发现这不是一个好的解决方案。

CSS:

.list li:before { 
 content:"•";  
 margin-right:4px;
}
.list {
    list-style-type:none;
    font-family: 'Open Sans';
    letter-spacing:-0.03em;
}
.list li {
    margin-bottom: 0px;
}

HTML:

<ul class="list">
        <li>How to Increase</li>
        <li>The bullet size</li>
      </ul>

Answer 1

将以下 CSS 指令添加到您的 .list li:before:

vertical-align: middle;

查看更新 JS Fiddle

编辑:
或者，您可以截取所需大小的元素符号屏幕截图，然后使用

list-style-image: url(path/to/image.png)