How to copy value of div:after to other div

Question

I have a simple list of li elements that I want to count using the CSS counter() function.

body       {counter-reset: quantity}
ul li      {counter-increment: quantity}
.sum:after {content: counter(quantity)}

<div class="mirror"></div>
<ul>
  <li>..</li>
  <li>..</li>
  <li>..</li>
  <li>..</li>
  <li>..</li>
</ul>
<div class="sum"></div>

The problem is that counter should be at the end of the page (inside the .sum - after all li's it needs to count) but I need to present its value at the top of the page (inside the .mirror or .mirror:after).

I'm trying to find some jQuery solution but nothing works. I'm thinking that the problem is with taking value from the :after pseudo-element.

Answer 1

You can take advantage of the Flexbox and order property, which comes together with its usage, to display the counter above list items since the .mirror div needs to be placed after the ul element in the DOM:

body {counter-reset: quantity}
ul li {counter-increment: quantity}

.flex-container {
  display: flex; /* assigned flex behavior to the parent wrapper so that you can take advantage of the order property / displays flex-items (children) inline by default, that's why you need to change its direction */
  flex-direction: column; /* now it stacks them vertically */
}

.flex-container > ul {
  order: 1; /* displays list items below the counter even though they are above it in the DOM / 1 because the .mirror div has the default value of 0 */
}

.mirror:after {
  content: counter(quantity);
}

<div class="flex-container">
  <ul>
    <li>..</li>
    <li>..</li>
    <li>..</li>
    <li>..</li>
    <li>..</li>
  </ul>
  <div class="mirror"></div>
</div>