css_pseudo_elements.asp

W3Schools tutorial..web designing

<pre>&lt;p class=&quot;article&quot;&gt;A paragraph in an article&lt;/p&gt;</pre>
</td></tr></table>
<p>The example above will make the first letter of all paragraphs with class=&quot;article&quot; red.</p>
<hr />

<h2>Multiple Pseudo-elements</h2>
<p>Several pseudo-elements can be combined:</p>
<table width="100%" border="1" class="ex" cellspacing="0"><tr><td>
<pre>p:first-letter {color:#ff0000;font-size:xx-large}
p:first-line {color:#0000ff}</pre>
<pre>&lt;p&gt;The first words of an article...&lt;/p&gt;</pre>
</td></tr></table>
<p>The output could be something like this:</p>
<table width="100%" border="1" class="ex" cellspacing="0"><tr><td>
<div class="ex1">The first<br />
words of an<br />
article...</div>
</td></tr></table>
<p>In the example above the first letter of the paragraph will be red with a font size of 24pt. The rest of the first line
would be blue while the rest of the paragraph would be the default color.</p>
<hr />
<h2>CSS2 - The :before Pseudo-element</h2>
<p>The &quot;:before&quot; pseudo-element can be used to insert some content before
the content of an element.</p>
<p>The style below will play a sound before each occurrence of an &lt;h1&gt; element:</p>
<table width="100%" border="1" class="ex" cellspacing="0"><tr><td>
<p>h1:before<br />
{<br />
content: url(beep.wav)<br />
}</p>
</td></tr></table>
<br />
<hr />
<h2>CSS2 - The :after Pseudo-element</h2>
<p>The &quot;:after&quot; pseudo-element can be used to insert some content 
after the content of an element.</p>
<p>The style below will play a sound after each occurrence of an &lt;h1&gt; element:</p>
<table width="100%" border="1" class="ex" cellspacing="0"><tr><td>
<p>h1:after<br />
{<br />
content: url(beep.wav)<br />
}</p>
</td></tr></table>
<br />
<hr />
<h2>Pseudo-elements</h2>
<p>
<b>Browser support:</b> IE: Internet Explorer, F: Firefox, N: Netscape.</p>
<p>
<b>W3C:</b> The number in the &quot;W3C&quot; column indicates in which CSS recommendation 
the property is defined (CSS1 or CSS2).</p>

<table class="ex" cellspacing="0" border="1" width="100%" cellpadding="3">
  <tr>
    <th align="left" valign="top" width="25%">Pseudo-element</th>
    <th align="left" valign="top" width="55%">Purpose</th>
    <th align="left" valign="top" width="5%">IE</th>
    <th align="left" valign="top" width="4%">F</th>
    <th align="left" valign="top" width="4%">N</th>
    <th align="left" valign="top" width="7%">W3C</th>
  </tr>
  <tr>
    <td valign="top"><a href="pr_pseudo_first-letter.asp">:first-letter</a></td>
    <td valign="top">Adds special style to the first letter
of a text</td>
    <td valign="top">5</td>
    <td valign="top">1</td>
    <td valign="top">8</td>
    <td valign="top">1</td>
  </tr>
  <tr>
    <td valign="top"><a href="pr_pseudo_first-line.asp">:first-line</a></td>
    <td valign="top">Adds special style to the first line
of a text</td>
    <td valign="top">5</td>
    <td valign="top">1</td>
    <td valign="top">8</td>
    <td valign="top">1</td>
  </tr>
  <tr>
    <td valign="top"><a href="pr_pseudo_before.asp">:before</a></td>
    <td valign="top">Inserts some content before the content of an element</td>
    <td valign="top">&nbsp;</td>
    <td valign="top">1.5</td>
    <td valign="top">8</td>
    <td valign="top">2</td>
  </tr>
  <tr>
    <td valign="top"><a href="pr_pseudo_after.asp">:after</a></td>
    <td valign="top">Inserts some content after the content of an element</td>
    <td valign="top">&nbsp;</td>
    <td valign="top">1.5</td>
    <td valign="top">8</td>
    <td valign="top">2</td>
  </tr>
</table>
<br />
<hr />

<a href="css_pseudo_classes.asp"><img border="0" src="../images/btn_previous.gif" width="100" height="20" alt="Previous" /></a>
 <a href="css_image_gallery.asp"><img border="0" src="../images/btn_next.gif" width="100" height="20" alt="Next" /></a>

<br />
<hr />

<!-- **** SPOTLIGHTS 1 **** -->

<iframe src="../banners/aspallframe.asp" height="110" width="485"
marginwidth="0" marginheight="0" frameborder="0" scrolling="no">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>
<hr />
<!-- **** SPOTLIGHTS 2 **** -->

<table border="0" cellpadding="0" cellspacing="0">

<tr>
<td rowspan="3" align="left" valign="top">
<img src="../images/stylusstudio_01.gif" width="118" height="470" alt="" align="top" /></td>
<td colspan="2" align="left" valign="top">
<img src="../images/stylusstudio_02.gif" width="376" height="154" alt="" /></td>
<td rowspan="3" align="left" valign="top">
<img src="../images/stylusstudio_03.gif" width="6" height="470" alt="" /></td>
</tr>

<tr>
<td colspan="2" bgcolor="#e9eaec">
<table width="376" border="0" cellspacing="5" cellpadding="0">
<tr align="left" valign="top">
<td><strong>Learn XML with Stylus Studio XML Editor &#150; Free Download<br /></strong><br />
Stylus Studio provides tools for editing and debugging
<a style="color:#1675b2" href="../../www.stylusstudio.com/xml/editor/default.htm" target="_blank">XML</a>,
<a style="color:#1675b2" href="../../www.stylusstudio.com/xslt.html" target="_blank">XSLT</a>,
<a style="color:#1675b2" href="../../www.stylusstudio.com/xml_schema.html" target="_blank">XML Schema</a>,
<a style="color:#1675b2" href="../../www.stylusstudio.com/dtd.html" target="_blank">DTD</a>,
<a style="color:#1675b2" href="../../www.stylusstudio.com/xquery.html" target="_blank">XQuery</a>,
<a style="color:#1675b2" href="../../www.stylusstudio.com/web_services.html" target="_blank">Web Services</a>,and more!<br /><br />
<strong>Using Stylus Studio XML Tools You Can:<br /></strong>
<ul>
<li type="disc" style="margin-bottom:5px">
<a style="color:#1675b2" href="../../www.stylusstudio.com/convert_to_xml.html" target="_blank">
Convert any File to XML</a> (CSV, Tab-separated, HTML, EDI &amp; more.)</li>
<li type="disc" style="margin-bottom:5px">
<a style="color:#1675b2" href="../../www.stylusstudio.com/videos/ddxqdemo/datadirectxquery.html" target="_blank">
Access and Update any database as XML</a> (SQL Server, Oracle, MySQL &amp; more.)</li>
<li type="disc" style="margin-bottom:5px">
View, Edit, Parse, and Validate XML files.</li>
<li type="disc">
<a style="color:#1675b2" href="../../www.stylusstudio.com/xml/publishing.html" target="_blank">
Publish your data</a>, including <a style="color:#1675b2" href="../../www.stylusstudio.com/videos/publisher1/publisher1.html" target="_blank">XML to HTML</a>
or <a style="color:#1675b2" href="../../www.stylusstudio.com/xml_to_pdf.html" target="_blank">XML to PDF</a></li>
</ul>

<p>See why millions use Stylus Studio as their preferred XML tool. Download a
<a style="color:#1675b2" href="../../www.stylusstudio.com/xml_download.html" target="_blank">FREE TRIAL</a>
or watch an online <a style="color:#1675b2" href="../../www.stylusstudio.com/xml_videos.html" target="_blank">VIDEO DEMO</a> today!</p>
</td>
</tr>
</table>
</td>
</tr>

<tr>
<td align="left" valign="top">
<a href="../../www.stylusstudio.com/xml_download.html" target="_blank">
<img name="stylusstudio_05" src="../images/stylusstudio_05.gif" width="159" height="35" align="top" border="0" alt=""
onmouseover="this.src='../images/stylusstudio_05-over.gif'" onmouseout="this.src='../images/stylusstudio_05.gif'" />
</a></td>
<td align="left" valign="top">
<a href="../../www.stylusstudio.com/xml_videos.html" target="_blank">
<img name="stylusstudio_06" src="../images/stylusstudio_06.gif" width="217" height="35" align="top" border="0" alt=""
onmouseover="this.src='../images/stylusstudio_06-over.gif'" onmouseout="this.src='../images/stylusstudio_06.gif'" /></a></td>
</tr>
</table>
<hr />


<!-- **** SPOTLIGHTS 3 **** -->
<table cellpadding="0" cellspacing="0"><tr><td width="72"></td><td>
<script type="text/javascript"><!--
google_ad_client = "pub-3440800076797949";
/*txt*/
google_ad_slot = "1699448869";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="../../pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td></tr></table>
<hr />

<center>

<script type="text/javascript"><!--
google_ad_client = "pub-3440800076797949";
/*imgtxt*/
google_ad_slot = "8606855891";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="../../pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</center>
<hr />


<!-- **** END SPOTLIGHTS **** -->

</td></tr>

<tr><td>
<p>Jump to: <a href="#top" target="_top"><b>Top of Page</b></a>
or <a href="../default.asp" target="_top"><b>HOME</b></a> or
<a href='css_pseudo_elements.asp@output=print' target="_blank">
<img src="../images/print.gif" alt="Printer Friendly" border="0" />
<b>Printer friendly page</b></a></p>
<p>W3Schools provides material for training only. We do not warrant the correctness of its contents.
The risk from using it lies entirely with the user.
While using this site, you agree to have read and accepted our
<a href="../about/about_copyright.asp">terms of use</a> and
<a href="../about/about_privacy.asp">privacy policy</a>.
</p>
<p><a href="../about/about_copyright.asp">Copyright 1999-2008</a> by Refsnes Data. All Rights Reserved.</p>
<table border="0" width="100%" cellspacing="0" cellpadding="0"><tr>
<td width="60%" align="left">
<a href="../../validator.w3.org/check@uri=referer" target="_blank">
<img src="../images/vxhtml.gif" alt="Validate" width="88" height="31" border="0" /></a>
<a href="../../jigsaw.w3.org/css-validator/check@uri=referer" target="_blank">
<img src="../images/vcss.gif" alt="Validate" width="88" height="31" border="0" /></a>
<a href="../../www.w3.org/WAI/WCAG1A-Conformance" title="Explanation of Level A Conformance" target="_blank">
<img src="../images/wai.gif" alt="W3C-WAI level A conformance icon" width="88" height="31" border="0" /></a>
</td>
<td>
<a href="../xhtml/xhtml_howto.asp" target="_top">W3Schools was converted to XHTML in December 1999</a>
</td></tr>

</table>
</td></tr>
</table>
</td>


<td width="145" align="center" valign="top">




<iframe style="background-color:#f1f1f1" src="../banners/rightcolumn.asp@secid=css" height="1500" width="147"
marginwidth="0" marginheight="0" frameborder="0" scrolling="no">
</iframe>

</td>
</tr></table>

</body>
</html>