The first-line pseudo element

by ginpei

HTML

<p class="target">
    Humpty Dumpty sat on a wall.<br />
    Humpty Dumpty had a great fall.<br />
    All the king's horses and all the king's men<br />
    couldn't put Humpty together again.
</p>
<p class="target" style="width:170px;">
    Humpty Dumpty sat on a wall.<br />
    Humpty Dumpty had a great fall.<br />
    All the king's horses and all the king's men<br />
    couldn't put Humpty together again.
</p>
<div class="target">
    <ul>
        <li>Humpty Dumpty sat on a wall.</li>
        <li>Humpty Dumpty had a great fall.</li>
        <li>All the king's horses and all the king's men</li>
        <li>couldn't put Humpty together again.</li>
    </ul>
</div>

CSS

.target::first-line {
    color: red;
}
.target {
    background-color: #eee;
    color: #999;
    text-shadow: 1px 1px #fff;
}