Home arrow Style Sheets arrow Page 6 - Learn CSS, part 7: Pseudo Elements
STYLE SHEETS

Learn CSS, part 7: Pseudo Elements


We have discussed CSS selectors in the last three articles in this sereis. We have said that a selector can be a markup element, an attribute selector based on the class and ID attributes, or a structured selector based on the document structure. CSS introduces pseudo elements, which we will be discussing in this article. This is one area of functionality that you can't achieve using HTML, and you will be amazed how easily you can achieve it in CSS.

Author Info:
By: Michael Youssef
Rating: 5 stars5 stars5 stars5 stars5 stars / 28
June 27, 2005
TABLE OF CONTENTS:
  1. · Learn CSS, part 7: Pseudo Elements
  2. · Using the ::first-line Pseudo Element
  3. · Using the ::first-letter Pseudo Element
  4. · Using the ::selection Pseudo Element
  5. · The Content Property
  6. · The ::before and ::after Pseudo Elements

print this article
SEARCH DEVARTICLES

Learn CSS, part 7: Pseudo Elements - The ::before and ::after Pseudo Elements
(Page 6 of 6 )

These pseudo elements give you the ability to insert text or images before (using ::before) the content of the element and after the content of the element (using ::after), through the use of the content property. They are very useful if you have some string values that are repeated in the HTML code a lot. Instead of sending them many times, increasing the size of the page and using more bandwidth, you can send these string values only once in the CSS file (because browsers will cache the CSS file). Use this in Web pages as much as you can, because doing so will save the page size -- but be careful to use  generated content, because it has not yet been implemented by IE.

Let's look at an example. In the next CSS code we set the before and after content for any <p> element that has the class QandA (note the power of the combination of element selector, class selector and the pseudo element offered by CSS):

p.QandA
{
  background-color: cyan;
  color: red;
  font-family: Arial;
}
p.QandA::before
{
  content: "Question: ";
  font-family: Arial;
  font-size: 1.1em; 
  color: white;  
  background-color: blue;
}
p.QandA::after
{
  content: " ?";
  font-family: Arial;
  font-size: 1.1em;
  color: white;
  background-color: blue;
}


And here's the HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <link rel="stylesheet" href="PElements.css" type="text/css">
    <title>CSS Pseudo Elements</title>
  </head>
  <body>
    <p class="QandA">Do you like CSS</p>
  </body>
</html>

 

The ::before pseudo element has inserted the value of its content property BEFORE the content of the <p> element, and has applied the styling rules too. The same thing applies to the ::after pseudo element.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials