::before and ::after pseudo elements
`::before` and `::after` are interesting but, to me, they are hard to understand and use correctly. These pseudo-elements are primarily used to insert content before and after an element. We can create interesting effects, particularly used with the [content](https://developer.mozilla.org/en-US/docs/Web/CSS/content) property from [CSS Generated Content Module](https://w3c.github.io/csswg-drafts/css-content/) Level 3 specification. In this post, we'll look at some examples of how these pseudo-classes work. Two notes before we begin: The current syntax for these pseudo-elements is `::before` and `::after`. In CSS 2.1 the syntax was `:before` and `:after` (with a single colon). Screen readers and other assistive technologies will not read the content you place with `::before` and `::after`. Keep this in mind when deciding what content to put in your generated content. In particular, make sure that the content you place in generated content has an alternative that is accessible. ## Numbering Sequences of Elements The first examples of `::before` that I saw were about numbering images without having to hard code the numbers in the `
`. The important part is to give the element `postition: relative`. we also give it a width of 80 characters to make it easier to read. ```css blockquote { font-size: 1.4em; width: 80ch; padding-left: 6rem; line-height: 1.6; position: relative; } ``` In the `::before` pseudo-element we create the quote itself. The [open-quote](https://css-tricks.com/almanac/properties/q/quotes/) value for content will insert the opening quotation mark using the browser's serif font. We define the color in two color spaces: the six-digit hexadecimal color and the same color expressed in the lch color space. We need to give the blockquote `position: absolute` so we can move it around using `left` and `top`. ```css blockquote::before { content: open-quote; font-family: serif; color: #D2042D; color: lch(45.06% 80.92 30.16); font-size: 8em; position: absolute; left: -2px; top: -4rem; } ``` One final thing. We need to "close" the quotation mark we used in the `::before` element. One way to do it is to use the `::after` pseudo-element with content set to `no-close-quote`. This will tell the browser that we want to close the quotation mark without nesting but not show it on the screen. ```css blockquote::after { content: no-close-quote; } ``` ## Adding Custom Quotation Marks for Inline Quotes We can also create custom quotation marks we create with the [q](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q) element. Because these quotations are inline they are much simpler to style. ```htmlWhen Dave asks HAL to open the pod bay door, HAL answers:
``` By default, browsers will add quotation marks around the text to indicate inline quotations. We can use `::before` and `::after` to change the type of quotation marks and style them as needed to match your theme. ```css q::before { content: "«"; color: red; } q::after { content: "»"; color: red; } ``` ## Accessibility Considerations I've mentioned this before but it bears repeating. Items we insert with `::before` and `::after` will not be read by screen readers so don't rely on inserted text as the primary mean of relying information to users.I'm sorry, Dave. I'm afraid I can't do that.