:之前和:在图像上出现多个边框/背景技巧之后？

Question

我一直在使用:之前或之后的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不能包含伪元素.当一个:before和:after在CSS中使用时,它在概念上产生的是这种类型的结构(例如,带有div;注意,这只是为了说明正在做什么,不创建实际的html元素):

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

伪元素放置在元素内.但是img标签(和input标签以及其他没有结束标签的非容器)没有"内容"去的地方,包括来自伪元素的生成内容.