Font-independent pixel-perfect negative CSS text-indents
The CSS
text-indent
property is used to offset the first line of text in a text block from the parent element’s inner box (the content area). It behaves like thepadding-inline-start
property, but only for a paragraph’s first line of text. It’s meant to allow your design to e.g. indent the first line to designate the start of a new paragraph (a more compact alternative to separating paragraphs by empty lines).The
text-indent
property has some additional uses with negative values. In this article, I’ll explore how the property can be used to implement hanging punctuation and list item markers. I’ll also discuss how difficult it is to know how many pixels to subtract for the desired effect, and how you should implement it instead. Some familiarity with CSS syntax, layout concepts, and common properties is assumed.
Source: Font-independent pixel-perfect negative CSS text-indents, an article by Daniel Aleksandersen.