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

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 '20 at 03:12

a darren · Accepted Answer · 2018-05-08T11:41:36.690

214

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.

edited May 08 '18 at 11:41

answered Nov 10 '09 at 16:31

a darren

8,929
4
43
46

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 08 '15 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;` – Sridhar Katakam May 05 '18 at 06: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 '20 at 15:21

score 76 · Answer 2 · answered Nov 10 '09 at 16:30

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.

Ramon de Jesus · Answer 3 · 2014-02-24T08:57:08.750

21

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.

edited Feb 24 '14 at 08:57

answered Feb 19 '14 at 14:13

Ramon de Jesus

741
6
10

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 '14 at 16:48

score 12 · Answer 4 · answered Feb 23 '13 at 11:27

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.

score 8 · Answer 5 · answered Jul 03 '12 at 19:43

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

McLeodWebDev · Answer 6 · 2015-02-04T10:02:11.967

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/

the updated version will address the additional line [JSfiddle](http://jsfiddle.net/McLeodWebDev/wfzwm0zy/) — McLeodWebDev, Feb 04 '15 at 10:03

score 6 · Answer 7 · answered Jun 12 '13 at 12:02

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.

score 6 · Answer 8 · edited Feb 08 '17 at 16:33

6

Or you can use

list-style-position: inside;

edited Feb 08 '17 at 16:33

Gianfranco P.

6,858
3
40
56

answered Jun 10 '15 at 13:29

Mathias Maes

386
1
5
13

j.j. · Answer 9 · 2020-07-13T12:38:44.640

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.

khaled_webdev · Answer 10 · 2017-07-28T17:20:20.830

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

edited Jul 28 '17 at 17:20

answered May 17 '12 at 14:18

khaled_webdev

1,380
14
18

score 3 · Answer 11 · answered Nov 10 '09 at 16:44

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.

score 1 · Answer 12 · answered Sep 09 '20 at 15:03

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

score 0 · Answer 13 · answered Mar 06 '14 at 18:56

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.

answered Mar 06 '14 at 18:56

AdamJones

709
1
12
31

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

score 0 · Answer 14 · answered Jun 13 '17 at 12:57

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

answered Jun 13 '17 at 12:57

Fatih Topcu

122
2
3

score 0 · Answer 15 · answered Oct 11 '18 at 21:05

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>

score 0 · Answer 16 · answered Mar 14 '20 at 13:59

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

score 0 · Answer 17 · answered Dec 12 '20 at 14:41

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.

answered Dec 12 '20 at 14:41

CyberMessiah

452
3
7

Adjust list style image position?

17 Answers17

Linked

Related