The Brave Programmer - Blogging and coding
Not for the faint hearted
 

Blog Posts From The Brave Programmer

Minimize

Cascading Style Sheets - Pseudo Elements

Apr2

Written by:
2009/04/02 08:46 AM RssIcon

CSS gives us the ability to style 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. Pseudo-elements allow you to style information that is not available in the document tree. But the browser can access those elements. For instance, using standard selectors there is no way to style the first letter or first line of an element's content.

Pseudo elements act like you've injected new HTML into the page and have the flexibility to style those new imaginary elements. Because we don't have direct control over them, it is the browsers responsibility to access them.

CSS 2.1 has four of them:

  • :first-line allows you to style the first line of a block element
  • :first-letter allows you to style the first letter of a block element
  • :before allows you to inject and style content before an element, block or inline.
  • :after allows you to inject and style content after an element, block or inline.

The first two pseudo-element selectors are based on traditional typesetting, where the first letter or the first line of text appears different to all other text on a page.The last two pseudo-element selectors are used to insert generated content either before or after an element on the page.

The syntax of pseudo-elements:

selector:pseudo-element {property: value}

CSS classes can also be used with pseudo-elements:

selector.class:pseudo-element {property: value}

The :first-line Pseudo-element

The "first-line" pseudo-element gives you the ability to style the first line of any block level element, such as p tag and the div tag:

p:first-line {color:#0000ff;font-variant:small-caps}
< p>Some text that ends up on two or more lines< /p>

The output could be something like this:

Some text that ends
up on two or more lines

In the example above the browser displays the first line formatted according to the "first-line" pseudo element. What is beyound our control is where the browse will break the first line. This depends on the size of the browser window.


Note: The "first-line" pseudo-element can only be used with block-level elements.
Note: The following properties apply to the "first-line" pseudo-element:

  • font properties
  • color properties
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

The :first-letter Pseudo-element

The first-letter pseudo-element is used to add special style to the first letter of the text in a selector. This display behaviour is similar to effects used in print mediea. Such as nespaper who whoul print the first letter of a paragraph in a different font size and colour.

p:first-letter {color:#ff0000;font-size:xx-large}
< p>The first words of an article...< /p>

The output might look something like this:

The first words of an article...

Note: The "first-letter" pseudo-element can only be used with block-level elements.
Note: The following properties apply to the "first-letter" pseudo- element: 

  • font properties
  • color properties 
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align (only if "float" is "none")
  • text-transform
  • line-height
  • float
  • clear

The :before and :after pseudo elements

These two pseudo-element selectors are used to insert other content either before or after an element on the page. The ":before" pseudo-element would normally be used to insert some content before the content of an element. For example, the style below will play a sound before each occurrence of an h1 element:

h1:before
{
content: url(beep.wav)
}

The ":after" pseudo-element would normally be used to insert some content after the content of an element. For example,
the style below will play a sound after each occurrence of an h1 tag:

h1:after
{
content: url(beep.wav)
}

Browser Support.

Unfortunately not all browsers support all the pseudo elements. Folowing is a table which displays  the typical browser support

IE: Internet Explorer, F: Firefox.

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

Pseudo-element Purpose IE F W3C
:first-letter Adds special style to the first letter of a text 5 1 1
:first-line Adds special style to the first line of a text 5 1 1
:before Inserts some content before the content of an element   1.5 2
:after Inserts some content after the content of an element   1.5 2

Tags:
Categories:
blog comments powered by Disqus
 
Blog Updates Via E-mail
 Blog Updates Via E-mail
Minimize

Do you want to receive blog updates via e-mail. Then just click on the link below. You will be redirected to Google's feed burner, where you can fill out a form. Supplying your e-mail address.

The subscription is managed entirely by Google's Feedburner. We cannot and do not collect your email address.

Subscribe to The Brave Programmer by Email

Print  
 

 

Latest Comments
 Latest Comments
Minimize
Powered by Disqus

Sign up with Disqus to enjoy a  surprise box of features

Print  
 
Blog Roll
 Blog Roll
Minimize
Print  
 
Categories
 Categories
Minimize
Print  
 
<h1>Search Blogs From The Brave Programmer</h1>
 

Search Blogs From The Brave Programmer

Minimize
Print  
 
Archive
 Archive
Minimize
Archive
<May 2017>
SunMonTueWedThuFriSat
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910
Monthly
Go
Print  
 
<h1>News Feeds (RSS)</h1>
 

News Feeds (RSS)

Minimize
Print  
 

Follow robertbravery on Twitter

Blog Engage Blog Forum and Blogging Community, Free Blog Submissions and Blog Traffic, Blog Directory, Article Submissions, Blog Traffic

View Robert Bravery's profile on LinkedIn

Mybyte

 

Robert - Find me on Bloggers.com

Tags
 Tags
Minimize
Print  
 
Contact Us Now
 Contact Us Now
Minimize
 

Email  us now or call us on 082-413-1420,  to host your website.

We design and develop websites. We develop websites that make a difference. We do Dotnetnuke Module development.

Web Masters Around The World
Power By Ringsurf
Print