Collected by
Elizabeth Janson
Home Page

Pseudo elements

Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content. Pseudo-elements allow designers to refer to this otherwise inaccessible information. Pseudo-elements may also provide designers a way to refer to content that does not exist in the source document (e.g., the :before and :after pseudo-elements give access to generated content such as in list construction).

This page used the code for each element P, which was a bit much, so breaks have reverted to the old <BR><BR> where red letters were not wanted.
COMMENT - there needs to be no gaps in P:first-letter {

<STYLE TYPE="text/css">
<!--
.firstwords { font-variant: small-caps; color:green }
.firstletter {font-size:300%; color:blue}

P:first-letter { font-size: 200%; font-style: italic;
         font-weight: bold; color: red; float: left }
-->
</STYLE>

Testing the first-words element
<P class="firstletter">T</SPAN><SPAN CLASS="firstwords">The first few words</SPAN> of a paragraph could be in small-caps. Style may also be inlined, such as changing the style of a word like <SPAN STYLE="color:red; font-family: Arial

">
Arial</SPAN>.</P>

The first few words of a paragraph could be in small-caps. Style may also be inlined, such as changing the style of a word like Arial. The first few words of a paragraph could be in small-caps. Style may also be inlined, such as changing the style of a word like Arial.

1 The :first-line pseudo-element
Applies special styles to the first formatted line of a paragraph, can only be attached to a block-level element. It did not appear to work in my example, so I substituted a SPAN routine.

It is similar to an inline-level element, but only the following properties apply to a :first-line pseudo-element: font properties, color properties, background properties, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow', and 'clear'.

2 The :first-letter pseudo-element
May be used for "initial caps" and "drop caps", which are common typographical effects. This type of initial letter is similar to an inline-level element if its 'float' property is 'none', otherwise it is similar to a floated element.

These are the properties that apply to :first-letter pseudo-elements: font properties, color properties, background properties, 'text-decoration', 'vertical-align' (only if 'float' is 'none'), 'text-transform', 'line-height', margin properties, padding properties, border properties, 'float', 'text-shadow', and 'clear'.

<style type="text/css">

</style>

Testing
<SPAN CLASS="firstletter">C</SPAN>omment
Comment ... We are on the edge of Browser obedience here (or is it just my mistakes?).

Email
CSS begins here

Back to pseudo selectors or on to Sample style sheet.

This page is part of Elizabeth Janson's web site

http://www.oocities.org/elizatk/index.html

My other sites are the Anglican Parish of Northern Mallee,
Tetbury residents in the Eighteenth Century
my Australian Family History and Barrie, our Family Poet.