如何使css段落编号在滚动框中工作?

为了解决工作中的一个问题,我一直在学习如何使用css进行段落编号。到目前为止,我对独立文本段落的结果感到满意。然而,我的要求是在带有垂直滚动条的滚动框中执行相同的操作。

如您所见: http://jsfiddle.net/Lceewqj3/3/ ,我通过从段落编号中删除绝对位置并添加右页边距来接近,但在正确定位段落起始左边缘时仍然存在问题。我的解决方案必须能够正确地处理两位数的段落号和一位数的段落号,因此固定的右边距不起作用,正如您向下滚动到段落10所看到的那样。我尝试添加width属性,但也不起作用。

请注意,修改现有 passage-scrolling 风格是我不能随意做的事情,所以我需要一个只涉及操作 chapter page 样式。

以下是小提琴的css:

  .chapter {
    counter-reset: paragraph;
    padding-left: 30px;
  }
  .page p {
    width: 75%;
  }
  .page p:before {
    //position: absolute;
    margin-left: -30px;
    margin-right: 14px;
    color: #000;
    font-style: italic;
    content: counter(paragraph);
    counter-increment: paragraph;
  }
  p {
    margin-top: 10px;
    font-family: 'Raleway', sans-serif;
    font-size: 17px;
    line-height: 22px;
    font-weight: 400;
  }
  .passage-scrolling {
    padding: 0 5%;
    height: 340px;
    width: 89%;
    border: 2px solid #999;
    overflow-y: auto;
    margin-bottom: 20px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
  }