This code explains pseudo elements first-letter and first-line and it’s working fine.
<html>
<head>
<title>Practice CSS :first-letter pseudo element </title>
</head>
<style type="text/css">
<!--
p:first-letter { font-size: 3em; text-color:red; }
p.normal:first-letter { font-size: 40px; color:red; }
p:first-line { text-decoration: none; }
p.line:first-line { text-decoration: underline; }
-->
</style>
<body>
<p class="normal"> First character of this paragraph will
be normal and will have font size 40 px;</p>
<p class="line">The first character of this paragraph will be 3em big
and in red color as defined in the CSS rule above. Rest of the
characters in this paragraph will remain normal. This example
shows how to use :first-letter pseudo element to give effect to
the first characters of any HTML element.</p>
</body>
</html>
Can I use both this pseudo elements first-letter and first-line on ‘p’ tag at the same time, as in code give below?
<p class="normal" "line"> First character of this paragraph will
be normal and will have font size 40 px;</p>
<p >The first character of this paragraph will be 3em big
and in red color as defined in the CSS rule above. Rest of the
characters in this paragraph will remain normal. This example
shows how to use :first-letter pseudo element to give effect to
the first characters of any HTML element.</p>
like @wog said, you need to join the classes like
class="normal line". here’s a jsfiddle to show that yes, you can. http://jsfiddle.net/3DnZD/