Why the two points twice?

Question

 p::after

What’s the 2 points twice (::)?

Answer 1

Because the ::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(s) elements indicated in the rule
• ::before creates a pseudo-element at the beginning within the(s) 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 affects only the style of what is selected
• ::backdrop ^{(experimental)} This pseudo-element is a box rendered immediately below the top element (and above the element just below that element, if any), inside the top layer

That is, in none of the cases is the element itself directly affected, but something that is not a real element, such as selection, letter, line or will create an element.

---

It is wrong to use with only once the :, as an example :after or :before?

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

I believe that the ideal is to retro-compatibility and at the same time avoid that in the future browsers abandon :after and :before, would use separately so:

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*/
 }

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

• Why selectors 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 at the same time, as in older phones for example.

Answer 2

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

/* CSS3 syntax */
::after

/* CSS2 syntax */
:after

To clarify a little more there are the Pseudo Elements and the Pseudo Classes.

As Pseudo Classes always has only one : already the Pseudo Elements may have only one : to work on older browsers or two :: for the newer versions.

Pseudo Elements

• ::after
• ::before
• ::first-Letter
• ::first-line
• ::Selection

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

• :active
• :checked
• :default
• :say()
• :disabled
• :Empty
• :enabled
• :first
• :first-Child
• :first-of-type
• :fullscreen
• :phocus
• :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:

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elementos

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Answer 3

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

As the meaning of the word itself says, pseudo are "false" elements, which exist only virtually and are not present in the GIFT.

What to use ::?

When you want to create another element that will be within the scope of the selected element. It’s like a clone-child of the real element, with its own properties. The advantage is that you can define this virtual element in any way you want to maintain 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. Clicking on it is the same thing as clicking on itself checkbox.

#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

As they are only visual elements not present in the DOM, the pseudo-elements cannot be manipulated by Javascript. This means that you cannot change its properties by scripting, only by CSS.