web-dev-qa-db-ja.com

css :: beforeを使用してリストのリンクの前に小さなアイコンを追加する

質問はそれをかなり説明しますが、私はそれらの前に単純なひし形のアイコンを置きたいリストアイテムがありますが、使用しようとするとき::それが同じ行の代わりに上の画像を配置してしまう前に、私は本当にそうではないようです同じ行のリストアイコンの直前に配置する方法を確認してください。

私が言ったように、画像は小さなダイヤモンドで、5px x 5px

.list-menu::before {
        content: url('../images/menu-icons/image-before.png');
}
<div class="sb-slidebar sb-left sb-style-Push">
        <nav>
                <ul>
                        <li class="list-menu"><a href="#">Home</a></li>
                </ul>
        </nav>
</div>
htmlcsscss-content
10
Bob

ここでは、::before疑似要素を使用する必要はまったくありません。背景画像のみを使用できます。

.list-menu {
  background-image: url('http://placehold.it/16x16');
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 20px; /* Adjust according to image size to Push text across. */
}
<div class="sb-slidebar sb-left sb-style-Push">
        <nav>
                <ul>
                        <li class="list-menu"><a href="#">Home</a></li>
                </ul>
        </nav>
</div>
18
James Donnelly

上手、 list-style-imageはそのために作られました。

IE 4.0以降でサポートされています。これで十分でしょう。

ul {
  list-style-image: url('http://placehold.it/12x12');
}
<ul>
  <li>Text content
  <li>Text content
  <li>Text content
</ul>
4
Creaforge