CODEWITHSUNDEEP
htmlcsscss-selectors
Bob
Bob

Reputation: 207

Using CSS:: before to add a small icon before list links

The question pretty much explains it but I have list items I want to put a simple diamond icon before them but when I try to use ::before it ends up putting the image above instead of the same line and I can't really seem to find out how to put it right before the list icon on the same line.

Like I said the image is just a small diamond, its 5px by 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>

Upvotes: 17

Views: 57745

Answers (3)

James Donnelly
James Donnelly

Reputation: 128776

There's no need to use the ::before pseudo-element here at all. You can just use a background image:

.list-menu {
  background-image: url('https://place-hold.it/16'); /* your image */
  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>

Upvotes: 25

dippas
dippas

Reputation: 60573

Answer 2022

Nowadays you can use ::marker pseudo element

li::marker {
  content: ' 🤖 '
}
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

Upvotes: 2

GuCier
GuCier

Reputation: 7425

Well, list-style-image is made for that.

Supported since IE 4.0. That should be enough I guess.

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

Upvotes: 8

Related Questions