WordPress / Web Development Tutorials
(Best WordPress Tutorials)

CSSHTMLJavaScriptjQueryMySQLPHPSilvaTechnologiesWooCommerceWordpress
Silva Web Designs - Blog

CSS – Indenting the second line of LI (List Items)

Have you ever wanted to indent the second line of a list item instead of it appearing directly beneath the bullet point? This is probably why you are here and below is probably the result you are looking for:

Today we are going to show you an easy way to do this.

The reason this is happening is that the tick is inline content so when the text wraps it will continue to flow as usual.

You can stop this behaviour by taking advantage of text-indent:

The text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element.

By supplying a negative text-indent you can tell the first line to shift a desired amount to the left. If you then specify a positive padding-left you can cancel this offset out.

In the following example a value of 20px:-


ul {  
    list-style: none; 
    width: 200px; 
    text-indent: -20px; /* key property */
    margin-left: 20px; /* key property */
    
}
li { margin-bottom: 10px; }

And there you have it, here is a CodePen of the above in action.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital-related. His main expertise is with WordPress and various other CMS frameworks. If you need responsive design, SEO, speed optimisation or anything else in the world of digital, you can contact Silva Web Designs here; [email protected]

It’s good to share

2 thoughts on “CSS – Indenting the second line of LI (List Items)

  1. THANK YOU SO MUCH! After trying the solutions from a whole bunch of other sites including multiple posts on StackOverflow, this was the thing that finally got my wrapped lines to be indented correctly. Much appreciated!

  2. Thank you! I’ve also searched around Google for hours. This post of yours definitely saved me. 🙂 I’m following you now on IG.

Join the discussion

Related Posts

Related - Best Practices To Maximise The Effective Use Of Photos In HTML

HTML / 16th February 2022

Best Practices To Maximise The Effective Use Of Photos In HTML

Read More Related - How to Limit Text Length to X Lines Using CSS

CSS / 15th February 2022

How to Limit Text Length to X Lines Using CSS

Read More