Как разместить счетчик приращений CSS ниже абзаца текста?

Question

Прикрепленная скрипка ставит counter-increment рядом с каждым абзацем.

Возможно ли в каждом абзаце текста <p>, чтобы включить counter-increment элемент под каждым абзацем, выровненный по правой стороне?

Я также создал скрипку

Если бы можно было предоставить обновленную скрипку, это было бы чрезвычайно полезно, так как я все еще новичок в кодировании.

---

HTML:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel enim vitae dolor luctus gravida. Vestibulum elementum eget augue eu imperdiet. Vestibulum rhoncus nibh eget lorem sodales auctor. Maecenas egestas volutpat condimentum. Mauris et lacinia nisl, a condimentum neque. Nunc euismod arcu volutpat odio auctor rhoncus vel sit amet lorem. Donec consectetur lacus arcu, vel dictum nisi consectetur sit amet. Vivamus vel nisl vel metus maximus pulvinar. Suspendisse non lacinia massa, at condimentum justo. Suspendisse potenti. Curabitur enim leo, venenatis nec quam id, elementum lacinia sem. Aenean velit dui, viverra ac placerat tempus, pharetra a est.</p>


<br></br>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel enim vitae dolor luctus gravida. Vestibulum elementum eget augue eu imperdiet. Vestibulum rhoncus nibh eget lorem sodales auctor. Maecenas egestas volutpat condimentum. Mauris et lacinia nisl, a condimentum neque. Nunc euismod arcu volutpat odio auctor rhoncus vel sit amet lorem. Donec consectetur lacus arcu, vel dictum nisi consectetur sit amet. Vivamus vel nisl vel metus maximus pulvinar. Suspendisse non lacinia massa, at condimentum justo. Suspendisse potenti. Curabitur enim leo, venenatis nec quam id, elementum lacinia sem. Aenean velit dui, viverra ac placerat tempus, pharetra a est.</p>

CSS:

body {
counter-reset: section;}

p:before {
counter-increment: section;
content: "Section " counter(section) ". ";}

Answer 1

Измените p.before, как показано ниже:

p:after {
    display: block;
    text-align: right;
    counter-increment: section;
    content: "Section " counter(section) ". ";
}

скрипка: https://jsfiddle.net/roullie666/10e4t9b4/3/