Home arrow Style Sheets arrow Learn CSS, part 7: Pseudo Elements

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
  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

Learn CSS, part 7: Pseudo Elements
(Page 1 of 6 )

As you know, a selector like h1 refers to all the <h1> elements in the markup document. You can directly apply any formatting styles to the <h1> elements with no problems. Sometimes, however, we need to apply certain formatting rules on parts of the document that can't be represented using HTML.

For example, maybe you need to apply a blue background and a text color of yellow to the first letter of a paragraph or a <Div> element, or maybe you want to change the font-size of the first line of each paragraph in your HTML file. There are no elements in the HTML that can do such things. In other words, there's neither a <firstletter> element nor a <firstline> element in HTML.

CSS gives us the ability to apply styling rules to certain parts of the document by using pseudo elements. Pseudo elements refer to parts of the document that you cannot directly access through the HTML-- but the browser can, through the Web designer PSEUDO. In other words, you don't have access to the first line of a paragraph using HTML elements, but CSS has a pseudo element to give you access to it and to let you apply your styling rules to it through the browser.

It's the browser's responsibility to get to these elements. We call them pseudo elements because they don't exist in the markup and we don't have direct control over them, as you will see in the code examples in this article. Let's begin.

blog comments powered by Disqus

- 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 

Developer Shed Affiliates


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