Rendering three vertical dots using SCSS I have a pretty simple question but I can't seem to find a solution for it. I have the following SCSS code (can be found below) which works fine, but I think it could be simplified to get rid of the double code. 

I'm trying to create 3 simple dots with CSS. I figured I could use one div and the :before and :after selectors. I'm looking for a pure (S)CSS solution and don't want to use icons/images. I have a working example but I feel like it could be a lot better structured.

Mainly I'm looking to change the selectors so I can get a format like:

div {
  // Styling for the div in it's normal state.
  [selector for div itself] &amp;:after, &amp;:before {
    // Styling for the div in it's normal state AND for it's :before and :after state
  }
  &amp;:after, &amp;:before {
    // Styling for JUST the :before and :after state
  }
  &amp;:after {
    // Styling for JUST the :after state
  }
  &amp;:before {
    // Styling for JUST the :before state
  }
}


&nbsp;

Current code

SCSS:

.row-options-icon{
  padding: 2rem;
  &amp;:hover{
    div, div:after, div:before{
      background-color: black;
    }
  }
  div {
    position: relative;
    border-radius:100px;
    background-color:gray;
    width:.5rem;
    height:.5rem;
    &amp;:after, &amp;:before {
      content: '';
      position: absolute;
      border-radius:100px;
      background-color:gray;
      width:.5rem;
      height:.5rem;
      display: inline-block;
    }
    &amp;:after {
      top: -1rem;
    }
    &amp;:before {
      top: 1rem;
    }
  }
}


HTML:

&lt;div class="row-options-icon"&gt;
    &lt;div&gt;&lt;/div&gt;
&lt;/div&gt;


Working Codepen example
What you're looking for is just &amp;:

  div {
    position: relative;
    &amp;, &amp;:after, &amp;:before {
      border-radius:100px;
      background-color:gray;
      width:.5rem;
      height:.5rem;
    }
    &amp;:after, &amp;:before {
      content: '';
      position: absolute;
      display: inline-block;
    }
    &amp;:after {
      top: -1rem;
    }
    &amp;:before {
      top: 1rem;
    }
  }