Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

An introduction to CSS pseudo-element hacks

DZone's Guide to

An introduction to CSS pseudo-element hacks

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

CSS is a versatile style language that is most frequently used to control the look and formatting of an HTML document based on information in the document tree. But there are some common publishing effects – such as formatting the first line of a paragraph – that would not be possible if you were only able to style elements based on this information. Fortunately, CSS has pseudo-elements and pseudo-classes.

That's the intro to Nicolas Gallagher's introduction to CSS pseudo-element hacks.  Of course, not everyone thinks that CSS hacks are a good idea, but I'd suggest that any web developer who is interested in learning CSS pseudo-elements that are part of CSS 2.1, namely, how to use :first-letter, :first-line, :before, and :after – and how the :before and :after pseudo-elements can be exploited to create some interesting effects; should take a good look at this comprehensive tutorial.  It includes sections on:

  • Browser support for pseudo-elements

  • Alternative ways to use pseudo-elements

  • CSS speech bubbles

  • CSS ‘ribbons’

  • CSS folded corners

  • Pseudo background-crop

  • and Pseudo background-position


"Some new applications will emerge, and existing ones will fade away as browser implementation of ‘CSS3 modules’ continues to improve," Gallagher says, but for now these are still relevant.

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}