Question

:after css不适用于img tag。这有什么替代品吗？ Demo

img {
    border-radius:50px;
    height:100px;
    position:relative;
}

img:after {
    content:"hi";
    width:20px;
    height:3px;
    position:absolute;
    right:0;
    top:47px;
    background:#000;
}

<img src="http://scienceblogs.com/gregladen/files/2012/12/Beautifull-cat-cats-14749885-1600-1200.jpg" />

Answer 1

唯一的解决方案是将图像包裹在范围内：

<span><img src="http://scienceblogs.com/gregladen/files/2012/12/Beautifull-cat-cats-14749885-1600-1200.jpg" /></span>

并使用此CSS：

span {
    position:relative;
}
img{
    border-radius:50px;
    height:100px;
}
span:after{
    content:"hi";
    width:20px;
    height:3px;
    position:absolute;
    right:0;
    top:47px;
    background:#000;
}

检查updated Fiddle

Answer 2

如果你把它包装在另一个元素中，它可以工作： http://jsfiddle.net/GhVbR/4/

HTML

<div class="kittenframe">
    <img src="http://placekitten.com/200/100" />
</div>

CSS

.kittenframe img{
    border-radius:50px;
    height:100px;
}

.kittenframe {    
    position:relative;
    display: inline-block;
}

.kittenframe:after{
    content:"hi";
    width:20px;
    height:3px;
    position:absolute;
    right:0;
    top:47px;
    background:#000;
}

：在css不能用于img标签之后。这有什么替代品吗？

2 个答案: