Why the colon twice? [duplicate]

Because ::after and ::before are pseudo elements and not selectors, there are others so too, ie they do not affect the element itself, but rather a pseudo element, current pseudo-elements

• ::after creates a pseudo element at the end within the elements indicated in the rule
• ::before creates a pseudo element at the beginning within the elements indicated in the rule
• ::first-letter affects the style of the first letter only
• ::first-line affects the style of the first line only
• ::selection only affects the style of what is selected

• This pseudo-element is a rendered box immediately below the top element (and above the element just below that element, if any), within the

  element

  top layer

That is, in neither case is the element itself directly affected, but something that is not a real element, such as selection, letter, line, or else it will create an element.

Is it wrong to use only ::backdrop , such as : or :after ?

It's not that it's wrong, but this is a way we can call a legacy, once both pseudo-elements and more specific selectors used only :before , with time to avoid confusion in pseudo elements was applied that should use : , but browsers to prevent old sites from breaking still support the use of :: and :after .

I think the ideal is if you want backward compatibility and at the same time prevent future browsers from ever dropping :before and :after , it would use separately like this:

regra1:after {
   /*regra1*/
}

regra1::after {
   /*regra1*/
}

regra2:before {
   /*regra2*/
}

regra2::before {
   /*regra2*/
}

Note that I do not recommend using this:

 regra1:after, regra1::after {
   /*regra1*/
 }

Because two selectors in a same rule can be overridden if one of them is invalid in the future (because browsers remove the legacy selectors :before and :after ), I explained about this in this question:

• Why do switches with prefixes in the same rule do not work?

I really hope that in the future with new CSS features things like variables or even the use of invalid selectors in the same rule without fail is possible, because only then can we avoid code repetition and maintain some compatibility with older browsers to the same time, as in older cell phones for example.

Pseudo elements can have these two points depending on the CSS version

/* CSS3 syntax */
::after

/* CSS2 syntax */
:after

To clarify further there are Pseudo Elements and Pseudo Classes .

Pseudo-Classes always have only a : and Pseudo-Elements can only have a : to work on older browsers or two :: for newer versions.

Pseudo Elements

• :: after
• :: before
• :: first-letter
• :: first-line
• :: selection

Pseudo Classes (here the syntax is always with only a : )

• : active
• : checked
• : default
• : dir ()
• : disabled
• : empty
• : enabled
• : first
• : first-child
• : first-of-type
• : fullscreen
• : focus
• : hover
• : indeterminate
• : in-range
• : invalid
• : lang ()
• : last-child
• : last-of-type
• : left
• : link
• : not ()
• : nth-child ()
• : nth-last-child ()
• : nth-last-of-type ()
• : nth-of-type ()
• : only-child
• : only-of-type
• : optional
• : out-of-range
• : read-only
• : read-write
• : required
• : right
• : root
• : scope
• : target
• : valid
• : visited

Source:

link

link

The colon :: points are used to create a pseudo-element of the selected element.

As the very meaning of the word says, pseudo are "fake" elements, which only exist virtually and are not present in DOM .

To use :: ?

When you want to create another element that will be within the scope of the selected element. It's like a child clone of the real element, with its own properties. The advantage is that you can define this virtual element as you like by keeping the same scope of the real element as if it were itself.

Example:

Run the snippet below and click on the red area that is a pseudo-element of checkbox . By clicking on it, it is the same as clicking on checkbox itself.

#teste::after{
   content: 'Clique em mim, é como se estivesse clicando no checkbox';
   background: red;
   top: 20px;
   position: relative;
   display: inline-block;
}

<input type="checkbox" id="teste" />

Limitations

Because they are just visual elements not present in the DOM, pseudo-elements can not be manipulated by JavaScript. This means that you can not change its properties through script, only by CSS.