How to make distance between dot and text in a unordered list smaller?

You could try a negative text-indent on the <li>:

li {
    text-indent: -5px;
}

For example: http://jsfiddle.net/ambiguous/QgNxw/

Browser support might be a bit dodgy (e.g. Opera and WebKit don't render that fiddle the same way). You could also try using the :before pseudo-element to add your own bullet:

.closer {
    list-style-type: none;
}
.closer:before {
    content: '•';
    margin-right: 3px;
}

For example: http://jsfiddle.net/ambiguous/eXxzH/

But then you'll have trouble with browsers that don't understand :before; but everyone but IE7 and older understand :before so that might not be an issue.

If CSS3 is okay, you might be able to do something with the ::marker pseudo-element.

There isn't that much fine grained control over how the bullets for a list item are rendered.

Tags:

Html

Css