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

Question

I wanted to create a vertical timeline and I came across this page.

http://cssdeck.com/labs/oz2nu681

I copied the code and there are some things which I am having trouble with.

• &::after
• &::before
• .radio:checked; & + .relative;

I tried to change it into that stylesheet code but got stuck here. Also the CSS code is different than what a traditional CSS file contains. What is this code and how do i use it?

Answer 1

&::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.