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