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

Question

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>

What about changing the <li> icon itself..

T J
– T J

2014-10-18 15:39:35 +00:00
Commented Oct 18, 2014 at 15:39 — T J
– T J, Commented Oct 18, 2014 at 15:39

Tooster · Accepted Answer · 2024-01-09 08:46:24Z

25

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>

edited Jan 9, 2024 at 8:46

Tooster

4515 silver badges17 bronze badges

answered Oct 18, 2014 at 15:30

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Bob Over a year ago

Thank you! Can you explain when I should use :before and :after?

James Donnelly Over a year ago

@Bob :before and :after are two pseudo-elements which were created when CSS introduced Generated Content. This specification documents what the precise use of such content is, but in short those are used to not expose certain information to the DOM tree whilst still making the content visible on the page.

TheRealChx101 Over a year ago

But what if you want to do that on a different element? Say, a <p>

James Donnelly Over a year ago

@TheRealChx101 you can use the same approach.

TheRealChx101 Over a year ago

@JamesDonnelly Thanks. I had figured it out already. I hadn't looked at it that well.

Sangwin Gawande · Accepted Answer · 2020-05-06 06:10:38Z

8

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>

edited May 6, 2020 at 6:10

Sangwin Gawande

8,2348 gold badges52 silver badges67 bronze badges

answered Sep 29, 2017 at 15:17

GuCier

7,4851 gold badge32 silver badges40 bronze badges

Comments

dippas · Accepted Answer · 2022-07-23 19:01:21Z

2

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>

answered Jul 23, 2022 at 19:01

dippas

60.8k15 gold badges125 silver badges134 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

5 Comments

Comments

Answer 2022

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Answer 2022

Comments

Your Answer

Sign up or log in

Post as a guest

Related