简体   繁体   中英

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, <p> , to include the counter-increment element below each paragraph, aligned on the right side?

I have also created a Fiddle

If an updated fiddle could please be provided, it would be extremely helpful, as I am still new to coding.


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) ". ";}

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/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM