Showing posts with label CSS Pseudo-Element. Show all posts
Showing posts with label CSS Pseudo-Element. Show all posts

Saturday, August 18, 2012

CSS Pseudo-Element


CSS pseudo-elements are used to add special effects to some selectors.

Syntax

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 is used to add a special style to the first line of a text.

In the following example the browser formats the first line of text in a p element according to the style in the "first-line" pseudo-element (where the browser breaks the line, depends on the size of the browser window):

Example

p:first-line
{
color:#ff0000;
font-variant:small-caps;
}

Try it yourself »

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 a special style to the first letter of a text:

Example

p:first-letter
{
color:#ff0000;
font-size:xx-large;
}

Try it yourself »

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

Pseudo-elements and CSS Classes

Pseudo-elements can be combined with CSS classes: 

p.article:first-letter {color:#ff0000;}

<p class="article">A paragraph in an article</p>

The example above will display the first letter of all paragraphs with class="article", in red.

Multiple Pseudo-elements

Several pseudo-elements can also be combined.

In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the first line will be blue, and in small-caps. The rest of the paragraph will be the default font size and color:

Example

p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}

Try it yourself »


CSS - The :before Pseudo-element

The ":before" pseudo-element can be used to insert some content before the content of an element.

The following example inserts an image before each <h1> element:

Example

h1:before
{
content:url(smiley.gif);
}

Try it yourself »


CSS - The :after Pseudo-element

The ":after" pseudo-element can be used to insert some content after the content of an element.
The following example inserts an image after each <h1> element:

Example

h1:after
{
content:url(smiley.gif);
}

Try it yourself »


All CSS Pseudo Classes/Elements

SelectorExampleExample description
:linka:linkSelects all unvisited links
:visiteda:visitedSelects all visited links
:activea:activeSelects the active link
:hovera:hoverSelects links on mouse over
:focusinput:focusSelects the input element which has focus
:first-letterp:first-letterSelects the first letter of every <p> element
:first-linep:first-lineSelects the first line of every <p> element
:first-childp:first-childSelects every <p> elements that is the first child of its parent
:beforep:beforeInsert content before every <p> element
:afterp:afterInsert content after every <p> element
:lang(language)p:lang(it)Selects every <p> element with a lang attribute value starting with "it"