使用before选择器插入HTML标记

Question

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

I want to insert the specified HTML using HTML's before selector.

But it shows markup as it is.

Actually it is a Twitter Embedded Widget created with https://twitter.com/settings/widgets/new and I want to show that image on every tweet.

I tried it with JQuery too but with JQuery it does not append anything.

 $(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

Try this (if your code not inside iframe):

I tested it works (In page):

    <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

You can do it by CSS and jQuery, but unfortunately content: does not support HTML

content syntax is like below :

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

as it does not support HTML, you can give it URL and set it's position

like this

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

But I recommend using jQuery to append HTML to the elements.