CSS Pseudo Elements

First letters and First lines

The first-letter pseudo element applies to the first letter of an element and first-line to the top line of an element. You could, for examples create drop caps and a bold first-line for paragraphs like this:

p:first-letter {
font-size: 3em;
float: left;}

p:first-line {
font-weight: bold;}

Before and after

The before and after pseudo elements are used in conjunction with the content property to place content either side of an element without touching the HTML.

The value of the content property can be open-quote, close-quote, no-open-quote, no-close-quote, any string enclosed in quotation marks or any image using url(imagename).

blockquote:before {
content: open-quote;}

blockquote:after {
content: close-quote;}

li:before {
content: “POW:”}

p:before {
content: url(images/jam.jpg)}

Note: The “first-line” pseudo-element can only be used with block-level elements.

For more information see CSS Pseudo-elements at W3 Schools.

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Powered by Wordpress

• Home
• About Architexture