Automatically appends “(PDF)” after links that point to PDF files, making it clear to users what type of file they’re about to download.

a[href$=".pdf"][download]::after { content: " (PDF)" }

The below piece of code creates a custom counter for list items, transforming them into a uniquely styled numbered list. This snippet uses the CSS counters to increment the list item number and display it before the item content:

.list { counter-reset: list-counter }
.item { counter-increment: list-counter }
.item::before { content: counter(list-counter) ". " }

This piece of CSS applies a grayscale filter to images on hover, creating an elegant visual effect that reverts to full colour when the mouse is moved away.

img:hover { filter: grayscale(100%) }

With this one-liner, you can easily transform any element into a perfect circle.

.circle { clip-path: circle(50%) }

Mix the element’s background image with its background colour using the multiply blend mode, creating a rich, layered visual effect.

.blend-background { background-blend-mode: multiply }

.gradient-text {
  background: linear-gradient(to top, red 0%, blue 100%);
  color: transparent;
  -webkit-background-clip: text;
}

The ::first-line pseudo-element makes the first line of your paragraph stand out by making it bold and changing its colour.

p::first-line {
  font-weight: bold;
  color: #333;
}

This CSS one-liner changes the style of a target element when you hover over its sibling.

.sibling:hover ~ .target { color: #007bff }
.sibling:hover + .target { color: #007bff }

This CSS trick automatically hides any element that has no content.

.element:empty { display: none }

It’s perfect for ensuring your design looks great in both portrait and landscape modes, especially on mobile devices where users might frequently change orientation.

@media (orientation: landscape) {
  body {
    background-color: #333
  }
}