5) Pseudo-Element Selector

Pseudo-element selector is used to select certain parts of an element, which are basically not a part of DOM tree.

:Before and :After

:Before/ :After selectors inserts something before / after the content of each selected element. This pseudo-element does not, however, become part of actual HTML structure and is just displayed visually.

These must be used with content property for generating the content which is to be inserted.
Use a string value in quotes ( Single or Double ). A string can be anything text, numbers and even blank.

Example: Adding content before and after using Unicode:

Edit here:jsfiddle

In the example above

  • We have added the quotation mark before and after the p element Using :after and :before.
  • You can add any string.
  • Here we have added quotation mark with a Unicode string which you can find here
  • Before using Unicode you have to escape the value by adding the forward slash. To differentiate between a Unicode string and number.