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

html css css-content
Bob picture Bob · Oct 18, 2014 · Viewed 46.5k times · Source

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

Answer

James Donnelly picture James Donnelly · Oct 18, 2014

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('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>

Related questions

Can I use a :before or :after pseudo-element on an input field?

I am trying to use the :after CSS pseudo-element on an input field, but it does not work. If I use it with a span, it works OK. <style type="text/css"> .mystyle:after {content:url(smiley.gif);} .…

Read More
Adding HTML entities using CSS content

How do you use the CSS content property to add HTML entities? Using something like this just prints &nbsp; to the screen instead of the non-breaking space: .breadcrumbs a:before { content: '&nbsp;'; }

Read More
CSS content property: is it possible to insert HTML instead of Text?

Just wondering if it's possible somehow to make the CSS content property insert html code instead string on :before or :after an element like: .header:before{ content: '<a href="#top">Back</a>'; } this would …

Read More