Tutorial – Inserting text and image content using CSS

Sometimes we don’t have control over backend templates, or it 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.
  Plain text

  Copy to clipboard

  Open code in new window

  EnlighterJS 3 Syntax Highlighter

  <p>Vikas</p>

  <p>Vikas</p>

  <p>Vikas</p>

  Plain text

  Copy to clipboard

  Open code in new window

  EnlighterJS 3 Syntax Highlighter

  p:before{

  content: "Mr. "

  }

  p:before{ content: "Mr. " }

  p:before{
  content: "Mr. "
  }

  HTML output : Mr. Vikas

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

  Copy to clipboard

  Open code in new window

  EnlighterJS 3 Syntax Highlighter

  <p>Vikas</p>

  <p>Vikas</p>

  <p>Vikas</p>

  Plain text

  Copy to clipboard

  Open code in new window

  EnlighterJS 3 Syntax Highlighter

  p:after{

  content: "Bhagwagar"

  }

  p:after{ content: "Bhagwagar" }

  p:after{
  content: "Bhagwagar"
  }

  HTML output : Vikas Bhagwagar

Inserting Image Using CSS “content” property.

• Plain text

  Copy to clipboard

  Open code in new window

  EnlighterJS 3 Syntax Highlighter

  <div>Payment Method</div>

  <div>Payment Method</div>

  <div>Payment Method</div>

  Plain text

  Copy to clipboard

  Open code in new window

  EnlighterJS 3 Syntax Highlighter

  div:after{

  content:url(https://code.vikaskbh.com/cc_logo.gif);

  display:block;

  }

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

  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.
  Plain text

  Copy to clipboard

  Open code in new window

  EnlighterJS 3 Syntax Highlighter

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

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

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

  Plain text

  Copy to clipboard

  Open code in new window

  EnlighterJS 3 Syntax Highlighter

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

  }

  #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; }

  #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;
  }