Geek Answers Handbook

: before and: after multiple border / background traversal in images?

I used the: before or: after CSS trick (explained in this article: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-multiple-borders-with-simple-css/ ) multiple borders and backgrounds. It works great on div elements, but I noticed that it doesn't work with images at all.

Here is my code:

 .author img { position: absolute; left: 10px; background-color: #fff; padding: 3px; border: 1px solid #d0d0d0; width: 48px; } .author img:before { content: ''; display: block; width: 80px; height: 16px; position: absolute; top: -17px; left: 0; background: red; }

Is there a way to use this trick on images or will I have to wrap my images in an extra div?

+4
source share
2 answers

You have to wrap img because img cannot contain a pseudo-element. When CSS uses :before and :after , what it conceptually generates is this type of structure (say with a div ; note, this is just to illustrate what is being done, the actual html elements are not created):

 <div><pseudo-element:before />Actual div content<pseudo-element:after /></div>

Pseudo-elements are placed inside the element. But img tags (and input tags and other such non-containers that don't have end tags) have no place for "content", including generated content from pseudo-elements.

+7
source

This works fine in the DIV, but the IMG does not work because it overlaps the area in which the internal borders apply. Fortunately, there is a very simple way: to contain the IMG inside the DIV.

 <div><img src="pic.jpg" alt="1" height="200" width="200" /></div>

And apply the styles:

 img {border: 2px solid red;} div {border: 3px solid black; width:204px; height:204px;}

Until you need to explicitly set the height / width of img in your HTML, you still need to know what it is, because the height / width of the DIV is calculated like this: div h = img h + img borderx2; div w = img w + img borderx2

+1
source

More articles:


All Articles