Pseudo element not rendering

1

Hey guys, so I am trying to make an image with a colour overlay and I am using the ::after pseudo element but it does not render on screen. Please help!!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="styles.css">
  <title>Frontend Mentor | Stats preview card component</title>
</head>
<body>
  <div class="container">
    <div class="description">
      <h1>Get <span class="purple">insights</span> that help your business grow.</h1>
      <p>
        Discover the benefits of data analytics and make better decisions regarding revenue, customer 
        experience, and overall efficiency.
      </p>
      <p class="column">
        10k+ companies
        314 templates
        12m+ queries
      </p>
    </div>
    <img class="desktop-img" src="./images/image-header-desktop.jpg" alt="image desktop">
    <img class="mobile-img" src="./images/image-header-mobile.jpg" alt="image mobile">
  </div>
</body>
</html>


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Lexend+Deca:wght@100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.mobile-img {
    display: none;
}

body {
    background-color: hsl(233, 47%, 7%);
    font-size: 15px;
    color: white;
}


.container {
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    background-color: hsl(244, 38%, 16%);
}

.description{
    display: flex;
    flex-direction: column;
    padding: 7vh 5vw;
    gap: 5vh;
}

.column {
    column-count: 4;
    text-transform: uppercase;
    column-gap: 30px;
}

.description p:not(.column) {
    margin-bottom: 10vh;
}

.desktop-img {
    width: 50%;
    position: relative;
}

.desktop-img::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsl(277, 64%, 61%); /* Change the color and opacity as needed */
  }
  

.purple {
    color: hsl(277, 64%, 61%);
}
2

Hello,
the reason the pseudo element after is not working properly is because pseudo elements do not work by default on images, a solution to this is to wrap your image is some sort of container & apply the pseudo element to it instead of the image directly

3

Thank you very much. It works!!