| <!DOCTYPE html> |
| <html> |
| <!-- |
| | Use the :after pseudo element to add text. |
| | Also test correct cascading. |
| --> |
| <head> |
| <style> |
| body { |
| margin: 0px; |
| font-size: 18px; |
| } |
| p { |
| margin: 0px; |
| font-size: 20px; |
| color: #00f; |
| } |
| p:after { |
| content: '!!!'; |
| font-size: 2em; |
| } |
| div:after { |
| content: ' when this is ignored...'; |
| font-size: 18px; |
| } |
| div:after { |
| content: ' and so on...'; |
| color: #090; |
| } |
| div.chocolate { |
| background-color: #cff; |
| font-size: 24px; |
| } |
| div.chocolate:after { |
| content: ' with chocolate!'; |
| font-weight: bold; |
| color: #630; |
| } |
| div.thrill:after { |
| content: ' for the thrill'; |
| } |
| span:after { |
| content: ' [spam] '; |
| } |
| </style> |
| </head> |
| <body> |
| <p>Bazinga</p> |
| <div>Smile</div> |
| <div>Cobalt rulez!</div> |
| <div class='chocolate'>Better</div> |
| <div class='thrill'> live </div> |
| <div class='chocolate'>Better <span>...</span></div> |
| <div class='thrill'>Yes<span> be sure to </span> live </div> |
| <span>Oh</span> |
| </body> |
| </html> |