Align second line of bullet points in CSS

HTML aligns the lines after the first line flush with the bullet point (the dot) instead of the text. You can fix this with the class below.

text-indent property applies only to the first line of a text-block. So we first “pull” the first-line back along with the dot. Then we push the entire text-block including the dot with the margin-left property.

1
2
3
4
5

.fix-bullet-align {
    list-style-position: inside;
    text-indent: -1em;
    margin-left: 1em;
}

Related Posts:

• Make an inner div full width in CSS
• Overflow content to both sides