用CSS实现类似信纸一样的虚线

先提需求吧

设计稿文案中每行文字下面都有一行虚线作为分隔，找了一张图，大致就如下

一时间我咋搞，没想法呀，文案要是有规律，一句话就一行那还好办一句话一个p标签，给p标签设置border-bottom,关键是这有的文案一句话要占好几行，有的一句话一行，总不能编辑改完我再一个个修吧，是电视剧不好看还是公司不care效率呀，这且不说，代码写成这，自己能跟自己过的去吗？只能想办法了。。。（双端pc+移动）

PC办法

1.一段文案一个p标签，一般都这样，便于编辑后期修改文案。给p标签设置border-bottom:1px dashed #b5b8b8;display属性为inline，在每个p标签后加标签，让其换行。一看，咦！对多行文案还真起作用了，但是段落结尾那一行虚线不会充满整个文案区域的宽度，这咋整，那就对每一个p标签设一个伪类吧，在before伪类上把虚线隐藏，在after伪类上重新画一个虚线，这样还真挺好的
贴下代码：

 p {
        display: inline;
        padding-bottom: 4px;
        border-bottom: 1px dashed #b5b8b8;
        position: relative;
        line-height: 26px;

        &:before {
          width: 493px;
          height: 1px;
          display: inline-block;
          position: absolute;
          bottom: -1px;
          content: "";
          // e3ddd1 f4efe8
          background: #f4efe8;
          border-bottom: none;
        }

        &:after {
          position: absolute;
          content: "";
          width: 493px;
          bottom: 0;
          left: 0;
          height: 1px;
          display: inline-block;
          border-bottom: 1px dashed #b5b8b8;
        }
      }

但是有个很大的缺点，看图

因为p标签是内联元素，虚线对不齐，在pc上比较明显，在移动端感觉还可以
那我就继续想办法吧

办法二

那就用平铺背景吧
切一个p标签高度的带有虚线的透明背景
如下：

图片宽高492px *27px
代码结构还是按上面那个方法写，代码如下：

 p {
        width: 100%;
        height: auto;
        background: url(../img/pc/inner/line-bg.png);
        background-size: 100%;
        padding-bottom: 5px;
        line-height: 26px;// 如果有文案太贴边或者看着分布不均匀可以通过设置line-height来调整
      }

      br {
        display: none;
      }

以上就完了，在pc使用第二个方法，在移动端就可以使用第一个方法