:before and :after multiple border/background trick on images?

Question

Hello,

I've been using 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/) to achieve multiple borders and backgrounds. It works great on div elements but I noticed it doesn't work on images at all.

Here's 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 additional div?

Answer 1

This works fine in DIVs, but an IMG wont work because it is overlapping the area where the inner borders are being applied. Luckily, there is a very simple workaround to this: contain the IMG inside a 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;}

While you wont need to explicitly set the img height/width in your HTML, you still need to know what they are because DIV height/width is calculated like so: div h = img h + img borderx2; div w = img w + img borderx2