Question

我有一个用户名列表：

<p>user 1</p>
<p>user 2</p>
<p>user 3</p>

我的目标是在用户名旁边的小圆圈中显示用户收到的推荐数量，其高度与文本相同。

我已经设立了一个小伙伴，但不知道如何实现我的目标：

http://jsfiddle.net/hAxJp/

有人有建议吗？

Answer 1

试试此代码

DEMO

<p>user <span>1</span></p>
<p>user <span>2</span></p>
<p>user <span>3</span></p>

span{
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    border-radius: 60px;
    text-align: center;
    background: gray;
}

Answer 2

尝试使用counter-reset：

设置将存储计数器映射特定元素的标识符和计数器的初始值。可以使用伪：after和：before。

的内容和属性显示此计数器

DEMO

<强> HTML

 <div>
<ul>
  <li>
    <h2>
      some text
    </h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure molestiae ab impedit assumenda aut magni tenetur nulla deserunt? Saepe consectetur obcaecati laboriosam excepturi voluptate nam sit facilis aut laborum quo?</p>
  </li>
  <li>
    <h2>
      some text
    </h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure molestiae ab impedit assumenda aut magni tenetur nulla deserunt? Saepe consectetur obcaecati laboriosam excepturi voluptate nam sit facilis aut laborum quo?</p>
  </li>
  <li>
    <h2>
      some text
    </h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure molestiae ab impedit assumenda aut magni tenetur nulla deserunt? Saepe consectetur obcaecati laboriosam excepturi voluptate nam sit facilis aut laborum quo?</p>
  </li>
  <li>
    <h2>
      some text
    </h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure molestiae ab impedit assumenda aut magni tenetur nulla deserunt? Saepe consectetur obcaecati laboriosam excepturi voluptate nam sit facilis aut laborum quo?</p>
  </li>
  <li>
    <h2>
      some text
    </h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure molestiae ab impedit assumenda aut magni tenetur nulla deserunt? Saepe consectetur obcaecati laboriosam excepturi voluptate nam sit facilis aut laborum quo?</p>
  </li>
   <li>
    <h2>
      some text
    </h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure molestiae ab impedit assumenda aut magni tenetur nulla deserunt? Saepe consectetur obcaecati laboriosam excepturi voluptate nam sit facilis aut laborum quo?</p>
  </li>
</ul>  
  </div>

CSS：p标签中带有动态数字的圆圈

2 个答案:

DEMO