| <!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> |