使用 before 选择器插入 HTML 标记答案

【问题标题】：INSERT HTML markup using before selector使用 before 选择器插入 HTML 标记
【发布时间】：2015-07-05 14:15:54
【问题描述】：

#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>');

});

【问题讨论】：

jQuery 不支持像::before 这样的伪选择器。
非常糟糕的主意，您应该将图像设置为 :before 选择器的背景，并具有适当的显示属性、宽度和高度
关于 jquery 代码：它可以工作 jsfiddle.net/g57xfn70 ，但你的内联样式不存在...
@demo 但它在我身边不起作用
@Umair，控制台出现错误？

标签： javascript jquery html css twitter

【解决方案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>

【讨论】：

【解决方案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 附加到元素。

【讨论】：