:before and :after Pseudo-elements : Pseudo Class « Style Basics « HTML / CSS






  1. HTML / CSS
  2. Style Basics
  3. Pseudo Class

:before and :after Pseudo-elements

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <title>:before and :after Pseudo-elements</title>
  <style type="text/css" media="screen">
    body {
      padding:.5em;
      font-family:"lucida grande";
    }
    
    p.note {
      font-size:85%;
      color:#666;
    }

    p.note:before {
      content:"[";
    }
    p.note:after {
      content:"]";
    }

    a[href^='http://']:after { content:" [" attr(href) "]";font-size:90%;font-style:italic;color:#999; }
    
    ul li { list-style:none;margin:0;text-indent:-1em; }
    ul li:before { content:"\2192 \0020"; }
    
  </style>
  
</head>

<body>
  <p class="note">Gorillas dont always eat bananas, all cows eat grass, good boys do fine always, and fat cops get donuts after every bust.</p>
  
  <p>Please visit <a href="http://superfluousbanter.org/">my site</a> whenever you get a chance.</p>
  
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
  </ul>
</body>
</html>








Related examples in the same category

1.The first-child Structural Pseudo-Class
2.Dynamic Pseudo-Class Selectors
3.first-letter and :first-line Pseudo-Elements
4.Dynamic pseudo-classes
5.Structural pseudo-classes
6.:target pseudo-class
7.h1::before, h1::after content: "::";
8.The first-child pseudo-class
9.Using the first-letter pseudo-element to create a "drop cap" letter
10.Link Pseudo-Class Example
11.Use Pseudo-Classes
12.First-letter Pseudo-element
13.Creating a drop cap using a CSS pseudo-element
14.First Line and Letter
15.p:first-line{font-weight:bold;}
16.first-letter {font-size:42px; width:200px;}
17.tr:first-child
18.Set style for a:link and a:visited