Skip to main content

selector-pseudo-element-colon-notation

Specify single or double colon notation for applicable pseudo-element selectors.

    a::before {}
/**  ↑
 * This notation */

Use this rule to enforce a convention. Pseudo-elements use two colons to tell them apart from pseudo-classes, but browsers also accept one colon for the four from CSS 2: :before, :after, :first-line and :first-letter.

Choose:

  • "double" for clarity
  • "single" for older browsers, which don't recognize ::

The fix option can automatically fix all of the problems reported by this rule.

This rule supports 1 message argument: the configured notation.

Options​

"single"​

Applicable pseudo-elements must always use the single colon notation.

{
  "selector-pseudo-element-colon-notation": "single"
}

The following patterns are considered problems:

a::before { color: pink; }
a::after { color: pink; }
a::first-letter { color: pink; }
a::first-line { color: pink; }

The following patterns are not considered problems:

a:before { color: pink; }
a:after { color: pink; }
a:first-letter { color: pink; }
a:first-line { color: pink; }
input::placeholder { color: pink; }
li::marker { font-variant-numeric: tabular-nums; }

"double"​

Applicable pseudo-elements must always use the double colon notation.

{
  "selector-pseudo-element-colon-notation": "double"
}

The following patterns are considered problems:

a:before { color: pink; }
a:after { color: pink; }
a:first-letter { color: pink; }
a:first-line { color: pink; }

The following patterns are not considered problems:

a::before { color: pink; }
a::after { color: pink; }
a::first-letter { color: pink; }
a::first-line { color: pink; }
input::placeholder { color: pink; }
li::marker { font-variant-numeric: tabular-nums; }