如何在一段文本下面放置一个css反增量?

时间:2015-11-13 01:34:38

标签: html css css-counter

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

在文本的每个段落<p>中,是否可以在每个段落下方添加counter-increment元素,在右侧对齐?

我还创建了一个Fiddle

如果可以提供更新的小提琴,那将非常有用,因为我还不熟悉编码。

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

1 个答案:

答案 0 :(得分:4)

更改p.before,如下所示:

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

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