Adjust list style image position?

user_158708 0
Viewed 279861

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

html-lists css image
17 Answers

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.

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

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>

user_47976030 

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

user_81181900

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.

user_31812580
Related