:After VS. ::After

:after vs. ::after

It's pseudo-class vs pseudo-element distinction.

Except for ::first-line, ::first-letter, ::before and ::after (which have been around a little while and can be used with single colons if you require IE8 support), pseudo-elements require double colons.

Pseudo-classes select actual elements themselves, you can use :first-child or :nth-of-type(n) for selecting the first or specific <p>'s in a div, for example.

(And also states of actual elements like :hover and :focus.)

Pseudo-elements target a sub-part of an element like ::first-line or ::first-letter, things that aren't elements in their own right.

Actually, better description here: http://bricss.net/post/10768584657/know-your-lingo-pseudo-class-vs-pseudo-element

Also here: http://www.evotech.net/blog/2007/05/after-v-after-what-is-double-colon-notation/

What is the difference between :after and ::after?

Pseudo-elements were denoted with a single colon in CSS2, but have been changed in CSS3 "in order to establish a discrimination between pseudo-classes and pseudo-elements". For compatibility reasons a single colon is still allowed for the pseudo-elements defined in CSS 1 and CSS2.

CSS2

5.12.3 The :before and :after pseudo-elements
The ':before' and ':after' pseudo-elements can be used to insert generated content before or after an element's content.

CSS3

7. Pseudo-elements
[...]
A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.
This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in this specification.

Difference between ::after and ::before in CSS

The answer is simple. Having :active::after and .is-depressed::before means that when your element is pressed you will change the before element AND when you click again you will change the after element so two different elements.

When having both of them as before then it's one element and it is already updated via .is-depressed so the active state will do nothing.

To illustrate this with a more simple example:

.box {

  border:1px solid;

  width:150px;

  height:150px;

  display:inline-block;

  position:relative;

}

.box:hover::before,

.box.active::before{

   content:"";

   display:block;

   height:50%;

   background:red;

}

<div class="box"></div>

<div class="box active"></div>

Should I use :after or ::after in JSFiddle?

Use the ::after syntax. If you check the current specification you can read:

The main differences between the selectors in CSS2 and those in Selectors are:
...
new pseudo-elements, and introduction of the "::" convention for pseudo-elements^ref

And

This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in this specification. ^ref

You will also find the same information in the future specification of Selectors Level 4

Because CSS Level 1 and CSS Level 2 conflated pseudo-elements and pseudo-classes by sharing a single-colon syntax for both, user agents must also accept the previous one-colon notation for the Level 1 & 2 pseudo-elements (::before, ::after, ::first-line, and ::first-letter). This compatibility notation is not allowed any other pseudo-elements. However, as this syntax is deprecated, authors should use the Level 3+ double-colon syntax for these pseudo-elements.

What is the difference between : and :: when using before and after?

The ::before notation (with two colons) was introduced in CSS3 in
order to establish a discrimination between pseudo-classes and
pseudo-elements. Browsers also accept the notation :before introduced
in CSS 2.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/::before

As before is a pseudo ELEMENT and not a pseudo CLASS (like :hover) two colons is better (thus following the CSS3 standard).

What's the difference between the ::after and ::backdrop pseudo-elements?

This pseudo-element is a box rendered immediately below the element
(and above the element below the element in the stack, if any), within
the same top layer.

As you see in the documentation you mentioned, it will add a new element between your actual element and the element after.

With ::after you can insert content after the content of your selected element (so the content is still add to the same element), see this example.

Pseudo element after documentation:

Insert content before, or after, the content of an element

Over that, there is a difference in what browsers can render the pseudo elements: Backdrop vs. After. As you can see, today (2016-02-19) you can use ::backdrop only in chrome, opera and android browser.

What is the correct behavior of ::before and ::after pseudo-elements on details ?

From the quotes you give, it seems that Chromium is in violation of the HTML requirements (should not be shown when details is closed) and Firefox is in violation of the CSS requirements (::before should precede the summary).

However, we also have the rendering requirements from the HTML specification, which for details/summary says:

The details element is expected to render as a block box. The element is also expected to have an internal shadow tree with two slots. The first slot is expected to take the details element's first summary element child, if any. The second slot is expected to take the details element's remaining descendants, if any.

So we only have two slots, and one slot is dedicated to the summary element. The other slot takes the remaining content, including that of the ::before and ::after pseudo elements. Such an arrangement can only be consistent with Firefox's behaviour.

Update: It turns out that the conclusion of the above answer is incorrect, at least according to Chrome's dev's - See the bug report.

Apparently, pseudo-elements do not ever participate in the slotting process, possibly because the process of slotting is a DOM - specifically a shadow DOM - operation. As such, at the time of slotting, pseudo elements - which are generated by the application of styling - don't exist, and therefore cannot participate in the slotting process. So they end up getting added at a later time in the rendering process around the entire already slotted arrangement, making Chromium's behaviour correct.

::after and ::before pseudo classes blocking anchor tags

Just add pointer-events: none to your ::before and ::after pseudo-elements and then your links will become accessible.

By the way, your way of defining a ::before and ::after is wrong, you should define them first, and then style them on ::hover state; but the first trick should solve your problem easily.

let me know if it'd work or not.