menu

Questions & Answers

Adjust list style image position?

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

Comments:
2023-01-20 00:20:04
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.
Answers(18) :

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.

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.

Comments:
2023-01-20 00:20:04
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;"
2023-01-20 00:20:04
For top positioning, changing top value worked for me instead of top padding. background: url(images/bullet.gif) no-repeat left 8px;
2023-01-20 00:20:04
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.
2023-01-20 00:20:04
This comment helped me, still useful @ 2022

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.

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

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

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.

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/

Comments:
2023-01-20 00:20:04
the updated version will address the additional line JSfiddle

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.

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.

Comments:
2023-01-20 00:20:04
This is the best solution in my opinion. If you float the ::before pseudo-element to the left, you achieve the same effect.

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.

Comments:
2023-01-20 00:20:04
You've never had to deal with cross-browser rendering, don't you?

Or you can use

list-style-position: inside;

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

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>

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.

Comments:
2023-01-20 00:20:04
The problem with this approach is that long text wraps to below the bullet

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

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;
}
Comments:
2023-01-20 00:20:04
Based on this I found a solution. The red border was very helpful! In my case I add an ul width of 100%. Thanks

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.

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>