Change color of li's indent?

Question

I have a bunch of lis. Every other li has an 'alt' class. My CSS looks something like this.

li.tab{
    list-style: none;
    background-color:#FFFFFF;
    padding-left: 18px;
    padding-top: 3px;
    padding-bottom: 3px;
    margin-left: 0px;
}
li.tab.alt,li.tab:before{
    background-color:#e8e8e8
}

However, that ends up looking something like this. Result

I would like that blank space to the left of the icon to be filled in. Is this possible with vanilla CSS or must I use a span as an indent? Thanks!

Filled in with the background colour? Like http://jsfiddle.net/2zezyknm/ ? `ul` has natural padding, remove it and add more padding to your `li` and done — Huangism, Feb 23 '15 at 19:27
Have you tried removing the padding form your `ul` and adding it to the `li`s? — Marcelo, Feb 23 '15 at 19:30

score 1 · Accepted Answer · answered Feb 23 '15 at 19:37

Not sure if this is what you are looking for but something like this should work:

http://jsfiddle.net/a3Lg2nh7/1/

give the <ul> a background color and replace margin with padding

ul {
    padding-left:50px;
    margin-left:0px;
    background:#e8e8e8;
}
li.tab{
    list-style: none;
    background-color:white;
    padding-top: 3px;
    padding-bottom: 3px;
    margin-left: 0px;
    display:block;
    position:relative;
    padding-left:10px
}
li.tab:nth-child(odd) {
    background:#e8e8e8;
}

Or if you want the same color for each row to extend the whole way simply replace margins with padding in the li and remove all margin/padding from the ul

http://jsfiddle.net/a3Lg2nh7/3/

ul {
    padding-left:0px;
    margin-left:0px;
}
li.tab{
    list-style: none;
    background-color:white;
    padding-top: 3px;
    padding-bottom: 3px;
    margin-left: 0px;
    display:block;
    position:relative;
    padding-left:60px
}
li.tab:nth-child(odd) {
    background:#e8e8e8;
}

Also you can use the nth-child selector instead of adding an alt class

Close! But no cigar. I don't want the gray background on the white element. I only want it on the elements with the gray background. — ollien, Feb 23 '15 at 22:52

score 0 · Answer 2 · edited May 23 '17 at 11:50

0

You should be looking for something like this:

HTML:

<ul>
    <li>test 1</li>
    <li>test 2</li>
    <li>test 3</li>
</ul>

CSS:

ul {
    list-style: none;
    padding:0;
    margin:0;
}

li { 
    padding-left: 1em; 
    text-indent: -.7em;
}

li:before {
    content: "• ";
    color: red; /* or whatever color you prefer */
}

you can see this at the jsfiddle: http://jsfiddle.net/8nq2zg9a/

This is an answer from this question: How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

Hope this helps you

edited May 23 '17 at 11:50

Community

1
1

answered Feb 23 '15 at 19:30

Alessander França

2,697
2
29
52

Nice solution, but I think this is not what OP is looking for. – John Weisz Feb 23 '15 at 19:33
This isn't what I want. I want to set the color of the indentation. – ollien Feb 23 '15 at 22:47

Change color of li's indent?

2 Answers2