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

Question

我一直在使用 :before 或 :after CSS 技巧(在本文中解释:http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-multiple-borders-with-simple-css/)来实现多个边框和背景。它适用于 div 元素，但我注意到它根本不适用于图像。

这是我的代码:

.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;
}

有没有办法在图像上使用这个技巧，或者我是否必须将我的图像包装在一个额外的 div 中？

Answer 1

您必须包装 img，因为 img 不能包含伪元素。当在 CSS 中使用 :before 和 :after 时，它在概念上生成的是这种类型的结构(比如，使用 div；注意，这只是为了说明正在做什么，并没有创建实际的 html 元素):

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

伪元素被放置在元素内部。但是 img 标签(和 input 标签，以及其他没有结束标签的非容器)没有“内容”的去处，包括生成的内容来自伪元素。