andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tidy up pseudo-element references

Browse Source
This commit is contained in:
Angelos Chalaris
2022-11-05 13:01:58 +02:00
parent 38468678f5
commit 20100fd229
19 changed files with 56 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
snippets/broken-image-fallback.md
View File

@ -11,7 +11,7 @@ firstSeen: 2022-11-04T05:00:00-04:00
Displays an error message when an image fails to load.
- Apply styles to the `img` element as if it was a text container.
- Use the `:before` and `:after` pseudo-elements to display an error message and the image URL. These elements will only be displayed if the image fails to load.
- Use the `::before` and `::after` pseudo-elements to display an error message and the image URL. These elements will only be displayed if the image fails to load.
```html
<img src="https://nowhere.to.be/found.jpg" />
@ -29,13 +29,13 @@ img {
width: 100%;
}
img:before {
img::before {
content: "Sorry, this image is unavailable.";
display: block;
margin-bottom: 8px;
}
img:after {
img::after {
content: "(url: " attr(src) ")";
display: block;
font-size: 12px;