html - 带有列表的数据图标

Question

当我使用 data-icon 属性时，我的 css 有点问题。

我使用 :before 属性来做到这一点，我的图标显示在它的顶部，而不是像我想要的那样在左侧。

CSS：

[data-icon]:before {
    font-family: 'icons';
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
}

HTML：

<ul class="tags" data-icon="&#x54;">
    <li>Petrole</li>
    <li>Gazoil</li>
    <li>BP</li>
    <li>Car</li>
</ul>

希望你能想通。

Answer 1

您可以绝对相对于其元素定位图标：

[data-icon] {
    padding-left: 20px; /* Horizontal space for icon and some gap. */
    position: relative;
    min-height: 14px; /* Height of icon. */
}

[data-icon]:before {
    position: absolute;
    left: 0;
    top: 0;
}

另一种可能的方法是使用display: inline或display: inline-block为项目和生成的伪元素图标：

[data-icon]:before,
[data-icon] > LI {
    display: inline;
}