Tutorial – Inserting text and image content using CSS

css-content-insert

Sometimes we don’t have control over backend templates or doesn’t seem feasible to update third party plugins code that frequently keep updating. In such situation, we could use javascript or css to update content. In most case javascript do it easily. But sometimes even css seems better to update frontend content without even updating DOM.

Inserting Text Using CSS “content” property.

  • It can be used with pseudo :before and pseudo :after elements selector.

    For an example selector:before is used to prepend style with pseudo element.

    <p>Vikas</p>
    p:before{
    content: "Mr. "
    }

    HTML output : Mr. Vikas

  • and selector:after is used to append style with pseudo element.

    <p>Vikas</p>
    p:after{
    content: "Bhagwagar"
    }

    HTML output : Vikas Bhagwagar

Inserting Image Using CSS “content” property.

  • <div>Payment Method</div>
    div:after{
        content:url(https://code.vikaskbh.com/cc_logo.gif);
        display:block;
    }

Inserting Image Using CSS “background-image” property.

  • It’s widely use and logo replacement technique. background-image could be supplied with url(URI) and background-position could be set accordingly and then making selector’s display : inline-block.

    <div id="payment_method_selector">
        <input type="radio" name="payment_method" id="payment_method" />
        <label for="payment_method">please select your payment method</label>
    </div>
    #payment_method_selector label {
        background-image: url('https://code.vikaskbh.com/cc_logo.gif');
        background-repeat: no-repeat;
        height: 40px;
        background-position: bottom left;
        display:inline-block;
        font:normal 13px arial, sans-serif;
    }

Total
0
Shares
Leave a Reply

Your email address will not be published.

 
Previous Post

jQuery toArray() function vs pure javascript code example

Next Post

How to use mysqldump command to backup mysql 5 database?

Related Posts