<!DOCTYPE html>
<style>
.before:before { content: 'Carpe '; }
.after:after { content: 'Foo '; }
.target:first-letter { color: green; font-size: 2em; }
span { text-decoration: underline; }
</style>
This tests various first letter combinations. In each case the first letter
should be larger and green.
<div class="target">Lorem</div>
<div class="target"><span>Ipsum</span></div>
<div class="target"><span class="before">Diem</span></div>
<div class="target"><span class="after"></span>bar</div>