伪类的使用之如何在一段文字前面添加一个点

示例

HTML内容：

<div class="sub-cell">

　　<p>　　

1.table是个好东西，如果你想使图片和文字对齐，用table的<td>标签控制，可以使他们保持对齐。

2.table还能解决浮动的居中对齐问题，其实我们用float的话会出现相当多的问题，大多数时候，我觉得可以用table来取代float来控制向右对齐，向左对齐的　　　　问题。

3.其实表单的对齐用table来控制 ，十分方便。有的时候不同的样式用同一种代码是无法解决的，你可以用width=“100%”或者width=“50px”等不同的方式去试试，也许就能解决。

以上是我在做项目时自己的总结，如有不对，欢迎大家指正，也可以补充哦。

　　</p>

</div>

less内容：

<style>

    .sub-cell {

      background-color: #f7f7f7;

    . px2rem(font-size, 24);

    . px2rem(line-height, 36);

    . px2rem(padding-top, 24);

    . px2rem(padding-right, 40);

    . px2rem(padding-bottom, 32);

    . px2rem(padding-left, 50);

    }

</style>

用伪类插入一个点后less代码()：

    .sub-cell p{

      background-color: #f7f7f7;

      .px2rem(font-size, 24);

      .px2rem(line-height, 36);

      .px2rem(padding-top,24);

      .px2rem(padding-right, 40);

      .px2rem(padding-bottom, 32);

      .px2rem(padding-left, 50);

      position: relative;

      &::before{

        content :counter(sub-item,disc);

        display: block;

        position: absolute;

        .px2rem(left, 30);

        .px2rem(top, 20);

      }

    }

前后对比会发现在文字前面加了一个点。

转载于:https://www.cnblogs.com/zhangmei/p/5710701.html