如何在一段文本下方放置一个 css 计数器增量? [英] How to place a css counter-increment below a paragraph of text?

问题描述

随附的小提琴在每个段落旁边放置一个counter-increment.

是否可以在文本的每个段落

中包含每个段落下方的 counter-increment 元素，并在右侧对齐?

Is it possible, within each paragraph of text, <p>, to include the counter-increment element below each paragraph, aligned on the right side?

我还创建了一个 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) ". ";}

推荐答案

更改 p.before 如下:

change p.before as below:

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

小提琴:https://jsfiddle.net/roullie666/10e4t9b4/3/

这篇关于如何在一段文本下方放置一个 css 计数器增量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！