Update Core CSS to use double-colon for pseudo elements

Created on 20 February 2023, almost 2 years ago
Updated 17 April 2023, over 1 year ago

Problem/Motivation

Pseudo elements in CSS (before, after, first-letter, etc) are supposed to use double colons, e.g. ::before.

Pseudo selectors on the other hand are supposed to use a single colon, e.g. :nth-child().

We are following this corrrctly in some places in our code, and not in other places. Modern browsers will accept either, so nothing appears broken. But it would be a good idea to set the standard, and follow it.

Steps to reproduce

Do a search for :before in the CSS files (specifically the *.pcss.css files) of core, and you'll see lots of examples of this.

Proposed resolution

Run a search-and-replace to fix this.

Remaining tasks

Fix it, commit it.

User interface changes

None

API changes

None

Data model changes

None

Release notes snippet

From Drupal 10.1, when writing CSS please use double colons for CSS pseudo elements and single colons for CSS pseudo selectors. Examples of pseudo elements are ::before, ::after and examples of pseudo selectors are :nth-child, :last-of-type.

📌 Task
Status

Fixed

Version

10.1

Component
CSS 

Last updated about 4 hours ago

Created by

🇮🇪Ireland markconroy

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024