189

Is there a way to adjust the position of list-style-image?

When I use padding for list items the image will stay at its position and won't move with padding...

1
  • 1
    It's really too bad this still isn't included in the CSS spec. What point is a list-style-image if it can't be positioned? It seems that as a result most people are using workarounds like ::before and background-image instead.
    – Mentalist
    Feb 20, 2020 at 3:12

19 Answers 19

228

Not really. Your padding is (probably) being applied to the list item, so will only affect the actual content within the list item.

Using a combination of background and padding styles can create something that looks similar e.g.

li {
  background: url(images/bullet.gif) no-repeat left top; /* <-- change `left` & `top` too for extra control */
  padding: 3px 0px 3px 10px;
  /* reset styles (optional): */
  list-style: none;
  margin: 0;
}

You might be looking to add styling to the parent list container (ul) to position your bulleted list items, this A List Apart article has a good starting reference.

4
  • 1
    This will put the list style a bit further to the right than normal list items, which is a bit "off" if there are normal ones below. I don't know the independent solution, but depending on your image's width, this will improve that: "margin: 0 0 0 -7px;"
    – e-motiv
    May 8, 2015 at 18:43
  • For top positioning, changing top value worked for me instead of top padding. background: url(images/bullet.gif) no-repeat left 8px; May 5, 2018 at 6:29
  • It's a real shame you can't style the list-style directly. It makes people use all sorts of workarounds. I'd really prefer to use list-style for something that's really a list-style, but I cannot make it look the way I want to.
    – mcv
    Mar 16, 2020 at 15:21
  • 1
    This comment helped me, still useful @ 2022
    – brill
    Dec 14, 2022 at 10:39
78

I normally hide the list-style-type and use a background image, which is moveable

li 
{
    background: url(/Images/arrow_icon.gif) no-repeat 7px 7px transparent;
    list-style-type: none;
    margin: 0;
    padding: 0px 0px 1px 24px;
    vertical-align: middle;
}

The "7px 7px" is what aligns the background image inside the element and is also relative to the padding.

22

A possible solution to this question that wasn't mentioned yet is the following:

    li {
        position: relative;
        list-style-type: none;
    }

    li:before {
        content: "";
        position: absolute;
        top: 8px;
        left: -16px;
        width: 8px;
        height: 8px;
        background-image: url('your-bullet.png');
    }

You can now use the top/left of the li:before to position the new bullet. Note that the width and height of the li:before need to be the same dimensions as the background image you choose. This works in Internet Explorer 8 and up.

1
  • This is the best solution in my opinion. If you float the ::before pseudo-element to the left, you achieve the same effect.
    – TaylorMac
    Sep 10, 2014 at 16:48
12

I had the same problem, but i could not use the background option (and didn't want to use multiple backgrounds) so i thought of another solution

this is an example for a menu that has a square like indicator for the active/current menu item (the default list style is set to none in another rule)

nav ul li.active>a:before{
    content: "■";
    position: absolute;
    top: -22px;
    left: 55px;
    font-size: 33px;

}

it creates a square by using a square character with the ":before" pseudo class and it is freely positionable by using absolute positioning.

8

Here's what I did to get small grey blocks to be on the left side and in the center of the text with an increased lineheight:

line-height:200%;
padding-left:13px;
background-image:url('images/greyblock.gif');
background-repeat:no-repeat;
background-position:left center;

Hope this helps someone :D

8

I'm using something like this, seems pretty clean & simple for me:

ul { 
     list-style:  none;
     /* remove left padding, it's usually unwanted: */
     padding:  0;
}

li:before {
     content:  url(icon.png);
     display:  inline-block;
     vertical-align:  middle;

     /* If you want some space between icon and text: */
     margin-right:   1em;
}

The above code works as is in most of my cases.
For exact adjustment you can modify vertical-align, e.g.:

vertical-align:  top;

/* or */
vertical-align:  -10px;

/* or whatever you need instead of "middle" */

You may set list-style: none on li instead of ul if you prefer.

1
  • The problem with this approach is that long text wraps to below the bullet Aug 5, 2022 at 23:18
6

The solution I settled for in the end was to modify the image itself to add some spacing.

Using a background image on the li as some suggest works in a lot of cases but fails when the list is used alongside a floated image (for example to get the text to wrap around the image).

Hope this helps.

0
6

Another option you can do, is the following:

li:before{
    content:'';
    padding: 0 0 0 25px;
    background:url(../includes/images/layouts/featured-list-arrow.png) no-repeat 0 3px;
}

Use (0 3px) to position the list image.

Works in IE8+, Chrome, Firefox, and Opera.

I use this option because you can swap out list-style easily and a good chance you may not even have to use an image at all. (fiddle below)

http://jsfiddle.net/flashminddesign/cYAzV/1/

UPDATE:

This will account for text / content going into the second line:

ul{ 
    list-style-type:none;
}

li{
    position:relative;
}

ul li:before{
    content:'>';
    padding:0 10px 0 0;
    position:absolute;
    top:0; left:-10px;
}

Add padding-left: to the li if you want more space between the bullet and content.

http://jsfiddle.net/McLeodWebDev/wfzwm0zy/

1
6

Or you can use

list-style-position: inside;
3

I think what you really want to do is add the padding (you are currently adding to the <li>) to the <ul> tag and then the bullet points will move with the text of the <li>.

There is also the list-style-position you could look into. It affects how the lines wrap around the bullet images.

0
3

like "a darren" answer but minor modification

li 
{
background: url("images/bullet.gif") left center no-repeat;
padding-left: 14px;
margin-left: 24px;
}

it works cross browser, just adjust the padding and margin

Edit for nested: add this style to add margin-left to the sub-nested list

ul ul{ margin-left:15px; }

0
2
ul { 
     /* Remove default list icon */
     list-style:  none;
     padding:  0;

     /* Small width and margin to demonstrate the text wrapping */
     width: 200px;
     border:1px solid red;
}

li{
   /* Make sure the text is properly wrpped (not spilling in the image area) */ 
    display: flex;
}

li:before {
     content:  url(https://via.placeholder.com/10/0000FF/808080/?text=*);
     display:  inline-block;
     vertical-align:  middle;

     /* If you want some space between icon and text: */
     margin-right:   2em;
}
1
  • Based on this I found a solution. The red border was very helpful! In my case I add an ul width of 100%. Thanks
    – Tenarius
    Feb 24, 2022 at 8:02
0

I find the accepted answer a bit of a fudge, far too must jostling with extra padding and css commands.

I never add padding to list items personally, normally controlling their line height and the occasional margin is enough.

When I have an alignment issue with custom list style images I just add a pixel or two of extra space around whatever side is required to adjust its position relative to each list line.

1
  • You've never had to deal with cross-browser rendering, don't you?
    – Volker E.
    Mar 16, 2014 at 0:59
0

solution with fontawesome

#polyNedir ul li { position:relative;padding-left:20px }
#polyNedir ul li:after{font-family:fontawesome;content:'\f111';position:absolute;left:0px;top:3px;color:#fff;font-size:10px;}
0

Hide the default bullet image and use background-image as you have much more control like:

li {
    background-image: url(https://material.io/tools/icons/static/icons/baseline-add-24px.svg);
    background-repeat: no-repeat;
    background-position: left 50%;
    padding-left: 2em;
}

ul {
    list-style: none;
}
<ul>
<li>foo</li>
<li>bar</li>
</ul>

0

My solution:

ul {
    line-height: 1.3 !important;
    li {
        font-size: x-large;
        position: relative;
        &:before {
            content: '';
            display: block;
            position: absolute;
            top: 5px;
            left: -25px;
            height: 23px;
            width: 23px;
            background-image: url(../img/list-char.png) !important;
            background-size: 23px;
            background-repeat: no-repeat;
        }
    }
}

0

Another workaround is just to set the li item to flex or inline-flex. Depending on the circumstances that may suit you better. In case you have a real icon / image placed in the HTML the default flex position is on the central horizontal line.

0

Another workaround: Adjust the position of the contents, instead of the image.

How: Put the contents of your li in a div with position=relative and top={whatever you want}

<li>
  <div style="position: relative; top: -3px">{Contents}</div>
</li>
0

Another solution that will allow the image to always be centred with no matter how many lines of content are in the li is this:

li {
        list-style-type: none;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      li::before {
        content: "";
        background-image: url("../your-path/image.png");
        background-repeat: no-repeat;
        background-size: contain;
        height: 20px;
        width: 20px;
        min-height: 20px;
        min-width: 20px;
      }

Not the answer you're looking for? Browse other questions tagged or ask your own question.