Pseudo element not rendering

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">
  <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>
  <div class="container">
    <div class="description">
      <h1>Get <span class="purple">insights</span> that help your business grow.</h1>
        Discover the benefits of data analytics and make better decisions regarding revenue, customer 
        experience, and overall efficiency.
      <p class="column">
        10k+ companies
        314 templates
        12m+ queries
    <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">

@import url('');

* {
    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%);

    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%);

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

1 Like

Thank you very much. It works!!

1 Like