CODEWITHSUNDEEP
htmlcsshtml-liststext-indent
user3383616
user3383616

Reputation: 163

Indent ragged li when using a custom bullet

I'm trying to indent ragged li lines whilst using a custom bullet point, however any minus 'text-indent' solutions I've found online haven't worked - unless I'm missing something.

Would it be possible for someone to take a look at the code below and tell me what I need to add to indent ragged li lines?

.list-icon-pros {
    list-style: none;
    padding-left: 0;
}
.list-icon-pros li:before {    
    font-family: FontAwesome;
    color: #B3B300;
    padding-right: 10px;
    content: "\f00c";
}

Upvotes: 7

Views: 2907

Answers (1)

Mathias
Mathias

Reputation: 5672

You could add a negative margin to the pseudo-element or you could use position: absolute.

Position absolute: http://jsfiddle.net/ZwYyL/6/

.list-icon-pros {
    list-style: none;
    padding-left: 20px;
    position: relative;
}
.list-icon-pros li:before {
    font-family: FontAwesome;
    color: #B3B300;
    content:"\f00c";
    position: absolute;
    left: 0;
}

Negative margin: http://jsfiddle.net/ZwYyL/5/

.list-icon-pros {
    list-style: none;
    padding-left: 22px;
}
.list-icon-pros li:before {
    font-family: FontAwesome;
    color: #B3B300;
    content:"\f00c";
    margin:0 5px 0 -22px;
}

Upvotes: 17

Related Questions