| <!DOCTYPE html> |
| <html> |
| <!-- |
| | Use the :before pseudo element to add text. |
| | Also test correct cascading and mixing with :after |
| --> |
| <head> |
| <style> |
| body { |
| margin: 0px; |
| font-size: 18px; |
| } |
| p { |
| margin: 0px; |
| font-size: 10px; |
| color: #00f; |
| } |
| p:before { |
| content: '???'; |
| font-size: 1.5em; |
| } |
| p:after { |
| content: '!!!'; |
| font-size: 2em; |
| background: #ff0; |
| } |
| div:before { |
| content: 'Ignored '; |
| font-size: 14px; |
| } |
| div:before { |
| content: 'As always '; |
| color: #0f0; |
| } |
| div:after { |
| content: '!'; |
| } |
| div.chocolate:before { |
| content: 'With chocolate '; |
| font-weight: bold; |
| color: #630; |
| } |
| div.large:before { |
| content: 'We\'ll do it '; |
| } |
| </style> |
| </head> |
| <body> |
| <p>bazinga</p> |
| <div >Life is great</div> |
| <div>Cobalt rulez</div> |
| <div class='chocolate'>it's better</div> |
| <div class='large'>Live</div> |
| <span>All Alone</span> |
| </body> |
| </html> |