Skip to main content
CSS-Tricks
  • Articles
  • Notes
  • Links
  • Guides
  • Almanac
  • Picks
  • Shuffle
Search

Articles Tagged
pseudo elements

22 Articles
A selected portion of the words premier league highlights showing the highlights styled in a variety of overlapping colors.
Direct link to the article Styling ::search-text and Other Highlight-y Pseudo-Elements
pseudo elements

Styling ::search-text and Other Highlight-y Pseudo-Elements

The new ::search-text pseudo (Chrome 144) matches are yellow while the current target (::search-text:current) is orange, but ::search-text enables us to change that.
Daniel Schwarz on Jan 28, 2026 Updated on Jan 29, 2026
Direct link to the article Quick Hit #85
chrome CSS pseudo elements

Quick Hit #85

Chrome 144 becomes the first to support ::search-text, a pseudo-element for selecting find-in-page text.…

Daniel Schwarz on Jan 16, 2026
Direct link to the article Creating Animated, Clickable Cards With the :has() Relational Pseudo Class
:has pseudo elements

Creating Animated, Clickable Cards With the :has() Relational Pseudo Class

The CSS :has() pseudo class is rolling out in many browsers with Chrome and Safari already fully supporting it. It’s often referred to it as “the parent selector” — as in, we can select style a parent element from a …

Brecht De Ruyte on Oct 25, 2022 Updated on Oct 27, 2022
Direct link to the article Single Element Loaders: The Bars
css animation gradients loader pseudo elements transform

Single Element Loaders: The Bars

We’ve looked at spinners. We’ve looked at dots. Now we’re going to tackle another common pattern for loaders: bars. And we’re going to do the same thing in this third article of the series as we have the others …

Temani Afif on Jun 24, 2022 Updated on Aug 27, 2023
Direct link to the article Conditionally Styling Selected Elements in a Grid Container
grid nth-child pseudo elements

Conditionally Styling Selected Elements in a Grid Container

Calendars, shopping carts, galleries, file explorers, and online libraries are some situations where selectable items are shown in grids (i.e. square lattices). You know, even those security checks that ask you to select all images with crosswalks or whatever.…

Preethi on Jun 15, 2022
Direct link to the article Single Element Loaders: The Spinner
animation gradients loader mask pseudo elements

Single Element Loaders: The Spinner

Making CSS-only loaders is one of my favorite tasks. It’s always satisfying to look at those infinite animations. And, of course, there are lots of techniques and approaches to make them — no need to look further than CodePen to …

Temani Afif on Jun 10, 2022 Updated on Aug 27, 2023
Direct link to the article CSS Pseudo Commas
copywriting lists nth-child pseudo elements

CSS Pseudo Commas

A bonafide CSS trick if there ever was one! @ShadowShahriar created a CodePen demo that uses pseudo-elements to place commas between list items that are displayed inline, and the result is a natural-looking complete sentence with proper punctuation.…

Geoff Graham on Aug 30, 2021 Updated on Sep 27, 2021
Direct link to the article The CSS :has Selector (and 4+ Examples)
:has :is :not pseudo elements

The CSS :has Selector (and 4+ Examples)

The CSS :has selector helps you select elements when they contain other elements that match the selector you pass into :has().
Robin Rendle on Mar 17, 2021 Updated on Nov 7, 2024
Direct link to the article Bold on Hover… Without the Layout Shift
hover pseudo elements

Bold on Hover… Without the Layout Shift

When you change the font-weight of a font, the text will typically cause a bit of a layout shift. That’s because bold text is often larger and takes up more space. Sometimes that doesn’t matter, like a vertical stack of …

Chris Coyier on Jul 27, 2020
  • 1
  • 2
  • 3
  • Older

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Contact
  • Write for CSS-Tricks!
  • Advertise with us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • Bluesky
Back to Top