使用before選擇器插入HTML標記

Question

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

我想使用HTML的before選擇器插入指定的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附加到元素上。