:::: MENU ::::

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.


    HTML output : Mr. Vikas
  • and selector:after is used to append style with pseudo element.

    HTML output : Vikas Bhagwagar

Inserting Image Using CSS “content” property.


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.



So, what do you think ?

  •