How To Place A Css Counter-increment Below A Paragraph Of Text?

The attached fiddle places a counter-increment next to each paragraph. Is it possible, within each paragraph of text,

, to include the counter-increment element below eac

Solution 1:

change p.before as below:

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

fiddle : https://jsfiddle.net/roullie666/10e4t9b4/3/