Adjust list style image position?

Question

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...

Mide

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. – Illegitimacy

Answer 1

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.

Splanchnology

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;" – Monotony

For top positioning, changing top value worked for me instead of top padding. background: url(images/bullet.gif) no-repeat left 8px; – Ilocano

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. – Selfconsequence

This comment helped me, still useful @ 2022 – Ardin

Answer 2

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.

Shiism

Answer 3

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.

Demoiselle

This is the best solution in my opinion. If you float the ::before pseudo-element to the left, you achieve the same effect. – Translator

Answer 4

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.

Travelled

Answer 5

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

Dispersal

Answer 6

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.

Veinstone

The problem with this approach is that long text wraps to below the bullet – Abnormal

Answer 7

Or you can use

list-style-position: inside;

Muzzleloader

Answer 8

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/

Pendergrass

the updated version will address the additional line JSfiddle – Pendergrass

Answer 9

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.

Evanish

Answer 10

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.

Vashti

Answer 11

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; }

Feldspar

Answer 12

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;
}

Harley

Based on this I found a solution. The red border was very helpful! In my case I add an ul width of 100%. Thanks – Brockington

Answer 13

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>

Trunnion

Answer 14

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.

Conspicuous

You've never had to deal with cross-browser rendering, don't you? – Flatt

Answer 15

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;}

Ilysa

Answer 16

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>

Cheesy

Answer 17

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;
        }
    }
}

Rarefied

Answer 18

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.

Sanbo

Answer 19

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;
      }

Seedman