content/test/data/accessibility/css/reading-flow-pseudo-elements.html

<style>
.wrapper {
  display: flex;
  reading-flow: flex-visual;
}
.wrapper::before {
  content: "4";
  order: 4;
}
.wrapper::after {
  content: "2";
  order: 2;
}
</style>
  
  <!--- Test reading flow for flex items re-ordered using CSS property order.
  Only direct children of wrapper are re-ordered.
  
  Expect order to be:
  1 -> 2 (after) -> 3 -> 4 (before)
  -->
  
<div class="wrapper">
  <button style="order: 3">3</button>
  <button style="order: 1">1</button>
</div>