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

Question

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

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

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

The pseudo-elements are placed inside the element. But img tags (and input tags, and other such non-containers that do not have ending tags) do not have a place for "content" to go, including generated content from pseudo elements.