2
\$\begingroup\$

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] &:after, &:before {
    // Styling for the div in it's normal state AND for it's :before and :after state
  }
  &:after, &:before {
    // Styling for JUST the :before and :after state
  }
  &:after {
    // Styling for JUST the :after state
  }
  &:before {
    // Styling for JUST the :before state
  }
}

 

Current code

SCSS:

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

HTML:

<div class="row-options-icon">
    <div></div>
</div>

Working Codepen example

\$\endgroup\$
  • 1
    \$\begingroup\$ Welcome to Code Review! This question is incomplete. To help reviewers give you better answers, please add sufficient context to your question. The more you tell us about what your code does and what the purpose of doing that is, the easier it will be for reviewers to help you. The current title states your concerns about the code; it needs an edit to simply state the task; see How to get the best value out of Code Review: Asking Questions for guidance on writing good question titles. \$\endgroup\$ – Toby Speight Oct 30 '18 at 10:16
  • \$\begingroup\$ @TobySpeight I edited it, hope it's more clear now \$\endgroup\$ – T. Dirks Oct 30 '18 at 10:45
  • 2
    \$\begingroup\$ The title and explanation still focus on your concerns about the code rather than why you wrote it. It's very hard to review code without properly understanding its purpose. \$\endgroup\$ – Toby Speight Oct 30 '18 at 10:51
  • \$\begingroup\$ @TobySpeight I have edited it again, hoping to have implemented your feedback. If it still isn't correct than I am afraid I don't quite understand what you are trying to explain... \$\endgroup\$ – T. Dirks Oct 30 '18 at 11:07
2
\$\begingroup\$

What you're looking for is just &:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.