CSS pseudo element not working

Question

I'm trying to create a gradient border underneath an image inside a div .

I'm 100% sure that my CSS code itself is perfectly fine as I've tested it on other elements before.

The problem is that somehow it refuses to select the correct element and place the pseudo element underneath it.

 #profilePicture { width: 200px; margin-left: 25px; border-top: 1px solid #070707; border-left: 1px solid #070707; border-right: 1px solid #070707; } #pf { display: block; width: 200px; } #pf:first-child:after { content: ''; position: absolute; width: 200px; height: 1px; background: -webkit-linear-gradient(left, #070707, #a1a1a1, #070707); background: -moz-linear-gradient(left, #070707, #a1a1a1, #070707); background: -o-linear-gradient(left, #070707, #a1a1a1, #070707); background: linear-gradient(to right, #070707, #a1a1a1, #070707); top: -1px; left: 0; } 

 <div id="profilePicture"> <img id="pf" src="layout/images/profile/pf.png"> </div> 

As far as I can tell it's supposed to select #pf which is the first child of its parent (true) and add the pseudo element after it?

Edit: I did try top: 1px and greater height s to be sure. This had no effect.

Answer 1

You can't use pseudo elements ( ::before and ::after ) in img tag (at least for now).

See what W3C specs says:

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

So you have to apply the pseudo element to the parent instead.

Also you need to use position:relative in the parent because you are applying position:absolute in pseudo element. With that you will keep the pseudo element in the flow with the DOM.

Note there is a few changes in your CSS

 body { margin: 0 } #profilePicture { width: 200px; margin-left: 25px; position: relative; border: solid #070707; border-width: 1px 1px 0 1px } #pf { display: block; } #profilePicture::after { content: ''; position: absolute; width: 200px; height: 5px; background: -webkit-linear-gradient(left, #070707, #a1a1a1, #070707); background: -moz-linear-gradient(left, #070707, #a1a1a1, #070707); background: -o-linear-gradient(left, #070707, #a1a1a1, #070707); background: linear-gradient(to right, #070707, #a1a1a1, #070707); bottom: 0; left: 0; } 

 <div id="profilePicture"> <img id="pf" src="//dummyimage.com/200x200&text=image"> </div> 

Answer 2

You can't use pseudo elements ( :before and :after ) with img tag, create extra div around img or add :after to your #profilePicture element instead.

Also there is no reason of using first-child in #pf:first-child:after selector since only one element with pf id can be on the page.

Edit:

1. Add position: relative to your #profilePicture
2. Remove top: 1px; from :after
3. Add bottom: 0; to :after

Answer 3

Just add position:relative for this selector #profilePicture , and change the #profilePicture::after to:

 #profilePicture::after { content: ''; position: absolute; width: 200px; height: 1px; background: -webkit-linear-gradient(left, #070707, #a1a1a1, #070707); background: -moz-linear-gradient(left, #070707, #a1a1a1, #070707); background: -o-linear-gradient(left, #070707, #a1a1a1, #070707); background: linear-gradient(to right, #070707, #a1a1a1, #070707); bottom: 1px; left: 0; }