Html ：css后不适用于img标记。这个有什么替代品吗？

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

img{
边界半径：50px；
高度：100px；
位置：相对位置；
}
img：之后{
内容：“你好”；
宽度：20px；
高度：3倍；
位置：绝对位置；
右：0；
顶部：47px；
背景：#000；
}
唯一的解决方案是将图像包装在跨度内：

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

检查
如果您将其包装在另一个元素中，它将起作用：

html

可能的重复也和更多…因为图像是一个内联元素，所以我选择将其包装在另一个内联元素中。但是，也可以将其包装在div或段落中。但请注意，这些元素都是块元素，可能需要进行更多调整才能适应设计。在一个跨度内，一个div或另一个容器元素（html5有几个其他元素可供选择）。此外，这个答案缺少一点关于为什么它不起作用的解释，但幸运的是，这个问题是重复的，这个问题已经涵盖了这一点。
<span><img src="http://scienceblogs.com/gregladen/files/2012/12/Beautifull-cat-cats-14749885-1600-1200.jpg" /></span>

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

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

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