Pseudo-elements can be used to style specific portions of an element. (They are also called "selectors".) A common example would be adding an indentation to the first line of every paragraph element, without having to manually add HTML spaces to each element.
Pseudo-elements are attached to a selector with a full colon, and accept common styling properties such as color, font and background.
This pseudo-element affects the first character of the element (selector, class or id) that it is applied to. It accepts the following properties:
The first letter of this paragraph, which happens to be a "T", is styled differently than the rest of the paragraph using a class called "fls" to which the :first-letter pseudo-element is applied with the properties shown in the example above
This pseudo-element affects the first line of the element (selector, class or id) that it is applied to. It accepts the following properties:
The first line of this paragraph is styled differently than the rest of the paragraph using a class called "flis" to which the :first-line pseudo-element is applied with the properties shown in the example above
These pseudo-elements can be used to add content before and/or after each element they are applied to. The "content" property should be used to specify the content to be inserted. That content can also be styled using other properties.
Applied, the above example might look something like this:
Keep smiling; it makes people wonder what you're up to.