Pseudo-elements in CSS3 do not appear in browser

Question

Pseudo-elements in CSS3 do not appear in browser

Navigation

#1 by (0 votes)

0

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

I can not create 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 looks like this:

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

css3

asked by anonymous 06.10.2017 / 13:47

1 answer

Footer does not stay below the Body, and button hover fires without the cursor being on top Jquery / Ajax / PHP field validation

score 0 · Accepted Answer

CSS does not support nesting in &:before{ style, this is language syntax that needs to be compiled for CSS as 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>