[Turtle91]

For full clarity - since the post you referenced was so old -

I also use the <hr/> to denote scene breaks. Apparently, that is the standard for assistive technology to determine scene breaks (or at least it was when I read the article last year...)
It is possible to fancy-up the <hr> to include a fleuron, or asterisks, not just a horizontal line:

HTML:
<hr class="ChDiv"/>

CSS:
hr.ChDiv {
  border: none; 
  margin: 1.25em auto; 
  height: .5em;
  background: transparent url("../Images/fleur.gif") no-repeat center;
  background-size: auto 100%;
  overflow: hidden;
  page-break-inside: avoid;
  break-inside: avoid;
}

The margin can be adjusted as necessary to complement the image size.

The height can be switched to "width" (with corresponding switch in background size) to accommodate taller vs. wider fleurs.
eg.
width: 3em;
background-size: 100% auto;

You can also include strings if you like:

hr.ChDiv {
  margin: 1.5em 0; 
  text-align: center; 
  letter-spacing: 1em;
  height:1em; 
  border:none; 
  background-color:transparent}

hr.ChDiv:before {content: "***"}
-or-
hr.ChDiv:before {content: "•••"}

or even MORE fancy: (taken from MDN webdocs)

hr.ChDiv {
    border: none;
    border-top: 3px double #333;
    color: #333;
    overflow: visible;
    text-align: center;
    height: 5px;
}

hr.ChDiv:after {
    background: #fff;
    content: '§';
    padding: 0 4px;
    position: relative;
    top: -13px;
}

Be careful though, some older devices might not support the "content" option for use of strings... it seems to work fine on my ePub 2 books. YMMV