Indentation and inline elements

The text-indent property specifies the indentation of the first line of text in a block container.

This means that applying text-indent on a link or any other inline element will not do anything (see 16.1 Indentation: the ‘text-indent’ property).

How to mimic indentation when text-indent is not an option?

In modern browsers, authors can use pseudo-elements to pull content out of boxes – and not only horizontally!

Examples

The following examples use the markup below:

<p>
<strong>Important!</strong>
</p>

indentation: -50px

CSS
strong:before {
  content:"";
  margin-left:-50px;	
}
Result

Important!

indentation: +50px

CSS
strong:before {
  content:"";
  margin-right:50px;	
}
Result

Important!

So what?

I hear you. You must be thinking, what’s the big deal since we could achieve the same results using text-indent on the parent container or even moving the <strong> element (via float, margin, etc). But check this out…

The next example uses the markup below:

<p>Important!</p>

"elevation": -50px

CSS
p {
  padding-left:400px;
}
p:before {
  content:"";
  display:block;	
  margin-top:-60px;
}
Result

Important!

Yes, the text is outside the paragraph. I’m not sure how useful this might be, but we never know 🙂