| <html> |
| <style> |
| p { |
| position: absolute; |
| height: 200px; |
| width: 200px; |
| font: 10px Ahem; |
| } |
| .c1::first-letter { font-weight: lighter; color: green; } |
| .c2::first-letter { font-weight: bold; color: blue; } |
| .c2::before { counter-increment: square; content: 'square: ' counter(square) url(square.png) '! '; } |
| ul { font: 10px Ahem; } |
| </style> |
| <script src="../../resources/ahem.js"></script> |
| <body> |
| <p class='c1'>I have a first letter.</p> |
| <p class='c1'><span>I have a first letter because of my parent.</span></p> |
| <p class='c2'>I have some content before me with a first letter.</p> |
| <ul><li>water</li><li>malt</li><li>hops</li><li>yeast</li></ul> |
| </body> |
| </html> |
