Псевдо-элементы в CSS

< html>
   < head>
      < style type="text/css">
         p:first-line { text-decoration: underline; }
         p.noline:first-line { text-decoration: none; }
      < /style>
   < /head>
   < body>
      < p class="noline"> This line would not have any underline because this belongs to  noline class.< /p>
     
      < p>The first line of this paragraph will be underlined as defined in the CSS rule above.
		Rest of the lines in this paragraph will remain normal.
		This example shows how to use :first-line pseduo element to give effect to the first line of any HTML element.< /p>
   < /body>
< /html>

< html>
   < head>
      < style type="text/css">
         p:first-letter { font-size: 5em; }
         p.normal:first-letter { font-size: 10px; }
      < /style>
   < /head>
   < body>
      < p class="normal"> First character of this paragraph will be normal and will have font size 10 px;< /p>
      
      < p>The first character of this paragraph will be 5em big  as  defined in the CSS rule above.
		Rest of the characters in this paragraph will remain normal.
		This example shows how to use :first-letter pseduo element
		to give effect to the first characters  of any HTML element.< /p>
   < /body>
< /html>

< html>
   < head>
      < style type="text/css">
         p:before
         {
            content: url(/images/bullet.gif)
         }
      < /style>
   < /head>
   < body>
      < p> This line will be preceded by a bullet.< /p>
      < p> This line will be preceded by a bullet.< /p>
      < p> This line will be preceded by a bullet.< /p>
   < /body>
< /html>

< html>
   < head>
      < style type="text/css">
         p:after
         {
            content: url(/images/bullet.gif)
         }
      < /style>
   < /head>
   < body>
      < p> This line will be succeeded by a bullet.< /p>
      < p> This line will be succeeded by a bullet.< /p>
      < p> This line will be succeeded by a bullet.< /p>
   < /body>
< /html>