Indent starting from the second line of a paragraph with CSS

Traditional hanging indent with padding

Homemade hanging indent

You could consider utilizing a hanging indent effect – traditionally seen in typography – achieved by amalgamating padding-left and text-indent. This combo makes the body text appear as if it's hanging under the first line.

p {
  padding-left: 1em; // Add some space
  text-indent: -1em; // Except for the first line
}


This technique provides an indent to all lines, whilst text-indent returns the first line to its original position. Consequently, only the second and following lines appear indented.

Indenting lists

For indenting list items (li), you could pair margin-left with a negative text-indent:

ul li {
  margin-left: 2em; // A little more space for bullets
  text-indent: -2em; // First line, come back!
}


This will generate a consistent hanging indent across all list items, excluding the presentation of bullet points or numbers.

Going beyond with advanced indentation techniques

Image-induced indentation

Stepping into the realm of creativity, you could use images for indentation. Either an SVG or a single-pixel image could be useful here:

p::before {
  content: "";        // It's secret
  display: inline-block;
  width: 1px;         // Thin as a hair
  height: 1em;        // Tall as a letter
  float: left;        // Let's swim!
  margin-left: -1em;  // Back to square one
}


Regulating the width and height of the ::before pseudo-element lets you control your indentation area. Ideal for the times when the indentation region must be independent of the enclosing div width.

Word-perfect baseline with SVG

For precise influence over text, you might consider adopting an SVG image to indent the text. Specifically, modulate the SVG's Y attribute to decide the baseline depth:

p::before {
  content: url('indentation-guide.svg');  // We trust SVG
  vertical-align: -0.25em;                // A little push-down is helpful
}


The vertical-align property synchronizes the SVG with the text, affording control over the text baseline.

Multi-line bold statement with floats

There are times when you want the first few words to span over two rows. That’s when the float property comes to the rescue:

p::first-line {
  float: left;       // I believe I can float!
  width: 100%;       // Feel the space!
  font-weight: bold; // Because I'm bold
}


This style enforces the first line to stand out, while subsequent lines are wrapped under, giving a unique indentation style.

Troubleshooting and Optimizations

Responsive design obligations

Whilst creating these indents, remember to make them responsive. You might need media queries to adjust indentation for different screen sizes.

Establishing cross-browser compatibility

Verify your designs across multiple browsers. Text-indent and float properties might render differently, so ensure to test them effectively.

Accessibility matters

Keep accessibility in the picture. Guarantee that the indentation isn’t impeding the legibility or navigation for disabled users.