Pseudo-elements in CSS3 does not appear in browser

Question

I’m trying to reproduce the circular progress bar effect, as per this tutorial .

I’m not able to create the pseudo-elements properly. My CSS looks like this:

.circular-progress{
    width: 12rem; 
    height: 12rem; 
    border-radius: 50%; 
    margin: auto; 
    background: linear-gradient(0deg, rgb(102, 102, 102) 50%, rgba(102, 102, 102,.2) 50%);
    position: relative;
    &:before{
        content: "";
        width: 12rem; 
        height: 12rem; 
        position: absolute;
        top: 0;
        left: 0;
        background: red content-box;
        border-radius: 50%;
        padding: .5em;
        box-sizing: border-box;
    }
}

The HTML looked like this:

<div class="circular-progress"></div>

Answer 1

CSS does not support nesting style &:before{, this is language syntax that needs to be compiled for CSS like less, sass or stylus.

Use it like this:

.circular-progress:before {

Example:

.circular-progress {
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  margin: auto;
  background: linear-gradient(0deg, rgb(102, 102, 102) 50%, rgba(102, 102, 102, .2) 50%);
  position: relative;
}

.circular-progress:before {
  content: "";
  width: 12rem;
  height: 12rem;
  position: absolute;
  top: 0;
  left: 0;
  background: red content-box;
  border-radius: 50%;
  padding: .5em;
  box-sizing: border-box;
}

<div class="circular-progress"></div>