Question

我试图获取伪图片，但什么也没出现，这是错误的方法，还是我们不能在内联元素上使用：after：beforfe。

img:after{
position:absolute;
width:100%;
height:100%;
background:red;
right:-100%;
}

img{
position:relative;
}

<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSkokrxxIX-EDiBFHl7z-gDrIscZSa2KDgl5Xm1-31053Zb1yvb"/>

Answer 1

是的，这是错误的使用::after和::before的方式，您可以添加img的父级，而不是使用::before和::after

Answer 2

您需要了解一些基本知识，例如使用content:''和figure。

figure:after{
    content:''; /*if you are using :after or :before you have to use content*/
    position:absolute;
    width:100%;
    height:100%;
    background:red;
    right:-100%;
}

figure{
    position:relative;
    width: 400px; /*just for test*/
}

<figure> <!-- HTML5 :) -->
    <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSkokrxxIX-EDiBFHl7z-gDrIscZSa2KDgl5Xm1-31053Zb1yvb"
     >
</figure>

Answer 3

我尊重所有答案，但不适用于img标记，您必须使用父级使其与img标记一起使用。尽管它可以与a，span等其他内联代码一起使用。希望它会对您有所帮助。

请注意，每次对content:"";和before进行CSS时，请添加after 谢谢

内联元素之前和之后可以使用吗？

3 个答案: