is there possible to use before and after for inline elements?

Question

I have tried to get after pseudo for image but nothing appears ,Is this a wrong way or we can't have :after :beforfe for inline elements.

img:after{
position:absolute;
width:100%;
height:100%;
background:red;
right:-100%;
}

img{
position:relative;
}

<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSkokrxxIX-EDiBFHl7z-gDrIscZSa2KDgl5Xm1-31053Zb1yvb"/>

what is that you want to do can you explain more and add code fiddle also — Learning, May 08 '19 at 04:43
https://stackoverflow.com/questions/5843035/does-before-not-work-on-img-elements - has your answer. — Mobarak Ali, May 08 '19 at 04:52

vinay choudhary · Answer 1 · 2019-05-08T11:34:35.600

0

yes this is wrong way to use ::after & ::before you can add a parent div of img than you can use ::before and ::after

edited May 08 '19 at 11:34

answered May 08 '19 at 04:55

vinay choudhary

174
9

score 0 · Answer 2 · answered May 08 '19 at 05:03

There are a few basics you need to know like, use of content:'' and figure.

figure:after{
    content:''; /*if you are using :after or :before you have to use content*/
    position:absolute;
    width:100%;
    height:100%;
    background:red;
    right:-100%;
}

figure{
    position:relative;
    width: 400px; /*just for test*/
}

<figure> <!-- HTML5 :) -->
    <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSkokrxxIX-EDiBFHl7z-gDrIscZSa2KDgl5Xm1-31053Zb1yvb"
     >
</figure>

score 0 · Answer 3 · answered May 08 '19 at 05:07

I respect all answers but it doesn't work with img tag, you have to use a parent to make it work with img tag. Although it works with other inline tage like a,span etc. Hope it will help you.

One thing please do add content:""; whenever you do css for before and after Thanks

is there possible to use before and after for inline elements?

3 Answers3