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