title: Put a pseudo element over other pseudo element (css best practices)
body: <p>I downloaded this design from frontend mentor to practice my css skills</p>
  <p><a href="https://i.stack.imgur.com/1jEII.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1jEII.jpg" alt="enter image description here" /></a></p>
  <p>this is the hover state of the design</p>
  <p><a href="https://i.stack.imgur.com/fEbZt.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fEbZt.jpg" alt="enter image description here" /></a></p>
  <p>this is my design</p>
  <p><a href="https://i.stack.imgur.com/l3BDx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l3BDx.png" alt="enter image description here" /></a></p>
  <p>I got this result with the next css rules:</p>
  <pre><code>const CardImage = styled.div`
    background-image: url(${(props) =&gt; props.cardImage || DefaultImage});
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 15px;
    height: 270px;
    margin-bottom: 25px;
    width: 270px;
    &amp;:hover:after {
      content: url(${ViewIcon});
      position: absolute;
      left: calc(50% - 24px);
      top: calc(50% - 135px);
    }
    &amp;:hover:before {
      position: relative;
      content:'';
      display: block;
      height: 100%;
      width: 100%;
      background-color: rgba(1,153,174,0.5);
    }
  `;
  </code></pre>
  <p>I'm new in css and I'm not sure if this is the best way to do this
  is there other best way to do this?</p>
  <p>the only way to do this is using pseudo elements?</p>