Put a pseudo element over other pseudo element (css best practices)


I downloaded this design from frontend mentor to practice my css skills

enter image description here

this is the hover state of the design

enter image description here

this is my design

enter image description here

I got this result with the next css rules:

const CardImage = styled.div`
  background-image: url(${(props) => props.cardImage || DefaultImage});
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 15px;
  height: 270px;
  margin-bottom: 25px;
  width: 270px;
  &:hover:after {
    content: url(${ViewIcon});
    position: absolute;
    left: calc(50% - 24px);
    top: calc(50% - 135px);
  }
  &:hover:before {
    position: relative;
    content:'';
    display: block;
    height: 100%;
    width: 100%;
    background-color: rgba(1,153,174,0.5);
  }
`;

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?

the only way to do this is using pseudo elements?

Source: CSS – Stack Overflow

November 24, 2021
Category : News
Tags: css | styled-components

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.