Cascading Style Sheets/Pseudo Elements

From WikiKnowledge

Jump to: navigation, search
::first-letter The first letter on an element.
::first-line The first line of an element.
::selection Selected text.
::before Allows you to insert text before an element.
::after Allows you to insert text after an element.

Contents

[edit] first-letter and first-line

These two Pseudo Elements allow you to style the first letter and the first line of elements separately from the rest of the element. Only works on block level elements.

[edit] Selection

This element is new in CSS3, and is not supported by Internet Explorer. This element will only accept color, cursor, background and outline properties. Using this element you can decide how selected text, that is text which has been highlighted with the mouse, should appear.

[edit] Before and after

Both these elements allow you to insert text before or after an element. This is done by putting the text you want in the content property. For example, if you had a list of questions, you could use CSS to add "Q. " before the question and a question mark afterward.


.question::before {content:"Q. ";}
.question::after {content:"?";}

Combining the above CSS with this HTML

<p class="question">What is CSS</p>

will give the result of "Q. What is CSS?". The start and end is added by CSS. These elements do not work in Internet Explorer.

[edit] Navigation

Personal tools
Ads:

Your Ad Here