Somename Somename - 2 months ago 6
CSS Question

Predefine before and after for CSS

The following code doesn't work. I want to predefine the

:before
and
:after
to be used in everywhere in the code.

&:after, &:before{
content:""; display:block; width:100%; height:100%; border-radius:50%;
}
.myclass:after{background-color:red;}


But the following code works:

.myclass:after{background-color:red;
content:""; display:block; width:100%; height:100%; border-radius:50%;
}


What am I doing wrong in defining it?

Thanks.

Answer

* not(&) is the selector for "all"

*::after, *::before{
    content:""; 
    display:block; 
    width:100%; 
    height:100%; 
    border-radius:50%;
}

& is used in SASS (and probably other pre-processors) to attach selectors like:

.test {
   &::after, &::before { // renders to .test::after, .test::before
        content:""; 
        display:block; 
        width:100%; 
        height:100%; 
        border-radius:50%;
    }
}