The first-letter 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">
    "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">
    I'm starving...<br />
    Can I ask you to give some piece of bread?
</p>

CSS

.target::first-letter {
    float: left;
    font-size: 3em;
    font-style: oblique;
    font-weight: bold;
    line-height: 1em;
    margin-right: .3em;
}
.target {
    background-color: #eee;
    color: #333;
    font-family: serif;
    text-shadow: 1px 1px #fff;
}