CSS
  1. CSS intro
  2. CSS stylesheets
  3. CSS syntax
  4. CSS Classes & ID's
  5. CSS comments
  6. CSS BG properties
  7. CSS text properties
  8. CSS font properties
  9. CSS list properties
  10. CSS border properties
  11. CSS margin properties
  12. CSS padding properties
  13. CSS outline properties
  14. CSS table properties
  15. CSS dim properties
  16. CSS class properties
  17. CSS position properties
  18. CSS pseudo classes
  19. CSS pseudo elements
  20. CSS shortcuts
  21. CSS media types
  22. CSS summary

CSS pseudo elements

With CSS pseudo elements, you can add special effects to some elements, just as with pseudo classes.

This tutorial focuses on:

Using pseudo elements

You can use a pseudo element by referencing it by name.

Syntax:
selector:pseudo-element {property: value}
Example:
<html> <head> <title>Pseudo elements</title> <style type="text/css"> p:first-line {color: blue;} </style> </head> <body> <p> The first line of this paragraph will be blue as specified by the "first-line" pseudo element. The other text in this paragraph will not be blue. </p> </body> </html>
Output:

Using pseudo elements with classes

You can use pseudo elements with classes.

Syntax:
selector.class:pseudo-element {property: value}
Example:
<html> <head> <title>Pseudo elements with classes</title> <style type="text/css"> p.one:first-line {color: blue;} p.two:first-letter {font-size: 34px;} </style> </head> <body> <p class="one"> This is a paragraph. This is the second sentence of the paragraph. This is the third sentence of the paragraph. This is the fourth sentence of the paragraph. </p> <p class="two"> This is a paragraph. This is the second sentence of the paragraph. This is the third sentence of the paragraph. This is the fourth sentence of the paragraph. </p> </body> </html>
Output:

In the above example, the pseudo-element "first-line" is used to specify that the first line of text declared with the <p> tag that is part of the "one" class will be blue. The pseudo-element "first-letter" is used to specify that the first letter of text declared with the <p> tag that is part of the "two" class will be 34 pixels in size.

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information