>:before – Is able to add content before a certain element. For example, adding an opening quote before a blockquote or perhaps an preceding image to set apart a particular paragraph.
>:after – Is able to add content after a certain element. For example, a closing quote to a blockquote. Also used commonly for the clearfix, where an empty space is added after the element which clears the float without any need for extra HTML markup.
>These are appropriately called pseudo “elements” (not selectors) because they don’t select any “real” element that exists on the page. This goes for these two, as well as the previous sections :first-letter and :first-line. Make sense? Like the first letter that :first-letter selects isn’t an element all to itself, it’s just a part of an existing element, hence, pseudo element.
As you can see the “Before Text” and “After Text” don’t appear in the HTML at all, rather they have been inserted by way of CSS.
There are a lot of useful things that **can* be done with these pseudo elements but although I have done so for demonstration purposes they should (in an ideal world) NOT be used to insert actual content.