| <html> | |
| <head> | |
| <style type="text/css"> | |
| p { | |
| border:medium solid blue; | |
| width: 5em; | |
| } | |
| p.a:before{ | |
| content: "AAAAAAAAA"; | |
| } | |
| p.ab:before{ | |
| content: "AAAA BBBB"; | |
| } | |
| p.az:before{ | |
| content: "AAAAAAAAA"; | |
| } | |
| p.az:after{ | |
| content: "ZZZZZZZZZ"; | |
| } | |
| p.yz:after{ | |
| content: "YYYY ZZZZ"; | |
| } | |
| p.z:after{ | |
| content: "ZZZZZZZZZ"; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- line break must not occur at pseudo element (:before, :after) boundaries. --> | |
| <p class="a">AA BB</p> | |
| <p class="a">AAAAA</p> | |
| <p class="ab">BBBBB</p> | |
| <p class="az">AA ZZ</p> | |
| <p class="az">MMMMM</p> | |
| <p class="yz">YYYYY</p> | |
| <p class="z">YY ZZ</p> | |
| <p class="z">ZZZZZ</p> | |
| </html> | |