Indentation and inline elements

This article was first published on css-101.org (03-03-2012).

The text-indent property specifies the indentation of the first line of text in a block container.
http://www.w3.org/TR/CSS2/text.html#indentation-prop

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>
    <strong>Important!</strong>
</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. And this is only because we have some top padding. If we didn’t have any padding at the top of the box then the whole box would move up with the strong element.

I’m not sure how useful this might be, but we never know 🙂