Pseudo-elements are basically a part, portion or specific form of an element. The correct syntax to use with a pseudo-element is selector:pseudo-element{property:value;}. You're most likely already partially familiar with these, even if you don't know it. To make it easier to explain them I will group them into three categories; links, actions and text or content.
Link pseudo-elements are the type probably already familiar to you. They are :link, :visited and :active. They style the specific form of links, a:link{property:value;} would style all unvisited links, a:visited{property:value;} would style only those links which had already been clicked and a:active{property:value;} would style the appearance of a link as it is clicked. You can use the :hover pseudo-element with links also, just be sure to use all of the link pseudo-elements in the correct sequence or :active and :hover won't work. The correct sequence is :link, :visited, :hover, :active. You don't have to use all of them, as long as you keep them in this order they'll still work
Next are the action type of pseudo-elements, :hover and :focus. Most are already familiar with :hover, it's pretty self explanatory. When used, it styles how something looks when the cursor is hovered on it. You can use :hover for more than just links. For example, I tend to use dark themes which would of course require a light colored text in order for the text to be visible. This is opposite of everything else we read since we are accustomed to a light background with dark text. What I did was enclose all of my blog entries in a div with a custom selector (.blog) then styled .blog in my custom CSS. Through the use of .blog:hover all of my blog entries now become easier to read when hovered, the colors change to a light background with dark text. There are a lot of uses for :hover, from changing text properties to replacing images. Then there's :focus, this one is of more limited use. It works only in places where user input is allowed, basically comments and replies, or forms. I've used this to make it easier and more natural to comment on previous sites. I used .selector{background-color:black;}, this turned the background of the comment text entry box black so it matched my theme. Then I added .selector:focus{background-color:white;} which caused the background of that same area to turn white when it's clicked. That box blends perfectly into my theme but when anyone clicks it to type a comment it reverts back to what people are used to when writing or reading, a light background with dark text.
Last are the text or content category of pseudo-elements, these are :first-letter, :first-line, :first-child, :before and :after. These can be used to add some interest to text items on your site. I'll use the previous example from my own site to explain these. I enclose all of my blog entries (and a few other odds and ends) in a div, giving them a class of .blog with <div class="blog"> then style .blog in my Custom CSS. The following all pertain to this setup
- :first-letter will style only the first letter of the selector used. Using my site as just described, if I added .blog p:first-letter{property:value;} to my custom CSS I could individually style the first letter of each paragraph contained in my .blog selector. I used this with font-size to make the first letter of each paragraph appear larger than the rest of the font. You could use color, font-face, whatever you wish.
- :first-line will style only the first line of the selector to which it is applied. Using my setup as an example .blog p:first-line{font-variant:small-caps;} would style the first line of text in every paragraph in my .blog div, changing the lower case letters to small upper case letters.
- :first-child will style only the first child element of the type specified. For example, in my .blog div I may have several paragraphs written using the HTML <p> tags. Those paragraphs, being contained within the .blog div, are the children of the .blog div. So if I were to add .blog p:first-child{color:red;} to my CSS then in every blog entry I'd enclosed in my .blog div the first paragraph would have a red font color. If I added something to it, like .blog p:first-child i {color:green;} then anything italicized in the first paragraph of any .blog div content would be green.
- :before will allow you to add content in front of existing content while :after will allow you to add content after existing content. You can add text or an image this way.
http://www.w3schools.com/css/css_pseudo_elements.asp
