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