CSS: Pseudo - Dealing with the :first Line Pseudo Element
(Page 2 of 4 )
The :first line pseudo element is very similar to the :first letter pseudo element, as I am sure you nerdy rocket scientists have figured out. The difference is that with :first line, <insert M. Knight Shamalyan surprise ending here> the first well, line is affected. Duh. Here it is in code for you non-believers:
<html>
<head>
<style type="text/css">
p:first-line
{
color: blue;
font-variant: small-caps;
font-family: Impact;
font-size: xx-large
}
</style>
</head>
<body>
<p>
Coming to a theatre near you: JAMES PAYNE'S KNUCKLE SAMMICH!
Just when you thought it was safe to eat a sandwhich...
</html>
You can of course mix the :first letter/:first line like so:
<html>
<head>
<style type="text/css">
p:first-letter
{
color: yellow;
font-size:xx-large;
text-decoration: underline overline
}
p:first-line
{
color: purple;
font-family: impact
}
</style>
</head>
<body>
<p>
Not many people think to combine yellow and purple colors together; that's because they are idiots.</p>
</body>
</html>
The :first line properties that can be used are:
font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
Next: Pseudo Classes >>
More Style Sheets Articles
More By James Payne
