Icon for post type: share Diving into the ::before and ::after Pseudo-elements Permalink: Diving into the ::before and ::after Pseudo-elements Bookmark Icon

This is a very comprehensive post by Will Boyd on the ::before and ::after pseudo-elements which covers basically everything you need to know to make use of them is a variety of scenarios.
I especially like the accessibility section at the end, which is will make a huge difference if we include this little extra in the future.

I didn’t know this yet:

div::after {
  /* screen reader says "chicken nugget" */
  content: url(chicken-nugget.png) / 'chicken nugget';
}

Besides that, the fish conversation on his homepage made my day 😁


Leave a comment

Available formatting commands

Use Markdown commands or their HTML equivalents to add simple formatting to your comment:

Text markup
*italic*, **bold**, ~~strikethrough~~, `code` and <mark>marked text</mark>.
Lists
- Unordered item 1
- Unordered list item 2
1. Ordered list item 1
2. Ordered list item 2
Quotations
> Quoted text
Code blocks
```
// A simple code block
```
```php
// Some PHP code
phpinfo();
```
Links
[Link text](https://example.com)
Full URLs are automatically converted into links.

Replied on your own website? Send a Webmention!