What is &::before, &::after in CSS? [closed]

&::after is actually nothing in CSS, but it is a feature of SASS/SCSS and is probably written in a context like this:

li {
  /* some style 1 */

  &::after {
    /* some style 2 */
  }

}

Which compiles to:

li { /* some style 1 */ }
li::after { /* some style 2 */ }

Basically, the ampersand in SASS pulls in the parent selector when it compiles to CSS.

EDIT
You can’t use the ampersand in a .css file, as it has no meaning, you can only use it in sass/scss files that are compiled to CSS using a SASS pre-processor.

Blog post (not mine) about ampersand in SASS:

http://www.joeloliveira.com/2011/06/28/the-ampersand-a-killer-sass-feature/

EDIT 2
Further answers:

Everything else is vanilla CSS, ::after, ::before are pseudo elements, .relative and .radio are class selectors, :checked is a pseudo class for input types radio and checkbox, and + is an adjacent sibling selector

MDN should be (one) of your authorities for CSS documentation, so I chose to link to their pages rather than simply copy and paste the contents of their documents into this answer.

EDIT 3

I realized I didn’t specifically state what & + .relative is.

I alluded to it initially when I said

the ampersand in SASS pulls in the parent selector when it compiles to
CSS

In the OPs linked example there is this code:

.radio:checked
  & + .relative
    label 
       ... some styles here

When you consider that & pulls in the parent selector you’ll see compiled CSS as this:

.radio:checked + .relative label { ... some styles here }

In “plain english”, if you will:

An element with a class of radio that is checked with an immediate adjacent sibling element that has a class of relative and a child of that element with a tag name of label.