0

I am trying to use :before and :after with image but it is not working. can I get your help?

<div class="services" id="services">
        <div class="title">services</div>
        <p class="slogan">Don't be busy, be productive</p>
    <img class="image" src="/images/services.jpg" alt="services">
   

    .services .image {
    width: 250px;
    float: right;
    margin-right: 110px;
    position: relative;
}
.services .image::before {
    content: "";
    width: 200px;
    height: 200px;
    background-color: black;
    position: absolute;
    top: 0;
    right: -50px;
    z-index: -1;
}
abdou
  • 21
  • 5

1 Answers1

0

elements such as audio, canvas, embed, iframe, img, input, object, and video not support :after and :before elements. This is because on render, their whole content will be replaced (including the psuedo elements)

You can try using js or jQuery instead.

mahmoud refat
  • 3
  • 3