Align second line of bullet points in CSS

Add RSS feed to Reader and sync to Readwise.

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.

.fix-bullet-align {
    list-style-position: inside;
    text-indent: -1em;
    margin-left: 1em;
}
Code language: CSS (css)

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *