<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><span>AAAAAAAAA</span>AA BB</p>
<p><span>AAAAAAAAA</span>AAAAA</p>
<p><span>AAAA</span> <span>BBBB</span>BBBBB</p>
<p><span>AAAAAAAAA</span>AA ZZ<span>ZZZZZZZZZ</span></p>
<p><span>AAAAAAAAA</span>MMMMM<span>ZZZZZZZZZ</span></p>
<p>YYYYY<span>YYYY</span> <span>ZZZZ</span></p>
<p>YY ZZ<span>ZZZZZZZZZ</span></p>
<p>ZZZZZ<span>ZZZZZZZZZ</span></p>
</html>