Add new css snippets

snippets/broken-image-fallback.md

@@ -0,0 +1,43 @@
+---
+title: Fallback for images that fail to load
+shortTitle: Broken image fallback
+tags: visual
+expertise: intermediate
+author: chalarangelo
+cover: blog_images/building-facade.jpg
+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.
+
+```html
+<img src="https://nowhere.to.be/found.jpg" />
+```
+
+```css
+img {
+  display: block;
+  font-family: sans-serif;
+  font-weight: 300;
+  height: auto;
+  line-height: 2;
+  position: relative;
+  text-align: center;
+  width: 100%;
+}
+
+img:before {
+  content: "Sorry, this image is unavailable.";
+  display: block;
+  margin-bottom: 8px;
+}
+
+img:after {
+  content: "(url: " attr(src) ")";
+  display: block;
+  font-size: 12px;
+}
+```

snippets/display-empty-links.md

@@ -0,0 +1,24 @@
+---
+title: Style links with no text
+tags: visual
+expertise: beginner
+author: chalarangelo
+cover: blog_images/metro-tunnel.jpg
+firstSeen: 2022-11-11T05:00:00-04:00
+---
+
+Displays the link URL for links with no text.
+
+- Use the `:empty` pseudo-class to select links with no text.
+- Use the `:not` pseudo-class to exclude links with text.
+- Use the `content` property and the `attr()` function to display the link URL in the `:before` pseudo-element.
+
+```html
+<a href="https://30secondsofcode.org"></a>
+```
+
+```css
+a[href^="http"]:empty:before {
+  content: attr(href);
+}
+```

snippets/hide-empty-elements.md

@@ -0,0 +1,22 @@
+---
+title: Hide empty elements
+tags: visual
+expertise: beginner
+author: chalarangelo
+cover: blog_images/metro-arrival.jpg
+firstSeen: 2022-11-18T05:00:00-04:00
+---
+
+Hides elements with no content.
+
+- Use the `:empty` pseudo-class to select elements with no content.
+
+```html
+<p>Lorem ipsum dolor sit amet. <button></button></p>
+```
+
+```css
+:empty {
+  display: none;
+}
+```