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;
}