p.note:before, p.note:after : p.before « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. p.before

p.note:before, p.note:after

    
<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:"]";
    }

    
  </style>
  
</head>

<body>
  <p class="note">G</p>

</body>
</html>








Related examples in the same category

1.p: before {content: "Quick Tip: "}
2.p:before content: url(images/pencil.gif);
3.p:before {content: counter(paragraphNumber, upper-roman) ": ";}
4.p:before {content:attr(class) ": ";}
5.This paragraph contains a note, the image has been added using the :before pseudo-element.
6.Adding quotation marks with p:before and after with 'content'