How is it possible to modify the gap between a bullet and its list text?

I wantto reduc开发者_运维百科e the gap between a bullet and its text in html ..

FOr instance I have

• This is the text

How is it possible to increase or decrease the gap between the bullet and The text using css?

---

Use text-indent with a negative value, like so:

li {text-indent:-8px}

---

The only way I've been able to achieve this [decreasing the native browser rendered spacing of the li] is by adding additional markup to your li and setting a negative margin.

As an example:

Markup:

<ul>
    <li>
        <span>This is the text</span>
    </li>
</ul>

CSS

li span { margin-left: -10px; }

This could add quite a bit of extra unnecessary markup for such a small requirement. You'd be better of using a background image on your li element which offers better position control without all the extra markup.

---

you can make it bigger by setting the padding on the <li> element:

<ul >
    <li style="padding-left:20px;">test</li>
    <li>test 2 </li>
</ul>

i haven't been able to figure out how to make it smaller, negative values don't seem to have an effect.

---

This is how I solved this.

If your list-style is inside then you could remove the bullet and create your own ... e.g. (in scss!)

li {
    list-style: none;
    &:before {
        content: '- ';
    }
}

And if you list style is outside then you could do something like this:

li { 
    padding-left: 10px;
    list-style: none;
    &:before {
        content: '* '; /* use any character you fancy~! */
        position: absolute;
        margin-left: -10px;
    }
}

The advantage of this approach is that you do not end up with more complex HTML and that a /

combination works out of the box.