Question

#twitter-widget-0 li div.header::before{
    content: '<div> <img src="images/home/twt-icon.png"> </div>';
}

我想使用HTML之前的选择器插入指定的HTML。

但它显示了标记。

实际上它是使用https://twitter.com/settings/widgets/new创建的Twitter Embedded Widget，我想在每条推文上显示该图片。

我也尝试使用JQuery，但是使用JQuery它不会附加任何内容。

 $(document).ready(function () {
        console.log("debug1");
        $("#twitter-widget-0 li div.header").prepend('<div class="boxthreelefts-right" style="    text-align: eig;"> <img src="images/home/twt-icon.png"> </div>');

});

Answer 1

试试这个（如果您的代码不在iframe内）：

我测试了它的工作原理（在页面中）：

    <div id="twitter-widget-0">
    <ul>
        <li>
            <div class="header"></div>
        </li>
        <li>
            <div class="header"></div>
        </li>
        <li>
            <div class="header"></div>
        </li>
    </ul>
</div>
<script>
$(function(){
    $('#twitter-widget-0 li div.header').each(function(key,value){
            $(this).before('<div class="boxthreelefts-right" style="text-align: eig;"> <img src="images/home/twt-icon.png"> </div>');
    });
});
</script>

Answer 2

你可以通过CSS和jQuery来做到这一点，但遗憾的是content:不支持HTML

内容语法如下：

content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;

因为它不支持HTML，您可以给它URL并设置它的位置

像这样

content:url('images/home/twt-icon.png');

但我建议使用jQuery将HTML附加到元素上。

使用before选择器插入HTML标记

2 个答案: