关于在一段文本上加修饰划线的效果

最近遇到一个需求，要在一段文字上面加上一条背景色。类似于上学时候用的记号笔做笔记一样的效果。
第一映像想到的可能是text-decoration: line-through；不过这里有一个问题，先上图：

<div id='s5'>放学<span>啦啦</span></div>

#s5{
  text-decoration: line-through;
}
#s5 span{
  font-size: 60px;
}

很明显因为文字大小不一致，导致line-through的位置会错位。

再看下图的解决办法，这里就没有改变个别文字的大小了。小伙伴们自己可以动手试一试。

附上代码：

<div>
  <span id='s1'>雯子同学</span>
  <span id='s2'>丸子同学</span>
  <span id='s3'>早上好，老师</span>
  <span id='s4'>早上好， 同学们</span>
</div>

div {
    font-size: 40px;
}
#s1 {
    background-image: linear-gradient(to bottom, #fff 45%, #0aa 45%, #0aa 60%, #fff 60%);
}
#s2 {
    background-image: linear-gradient(to right, blue, blue 100%);
    background-position: 0 50%;
    background-repeat: repeat-x;
    background-size: 100% 7px;
}
#s3 {
    border-bottom: 8px solid red;
    display: inline-block;
    height: 26px;
}
#s4 {
    position: relative;
}
#s4:after {
    content: "";
    position: absolute;
    left: 0;
    top: 26px;
    display: block;
    width: 100%;
    border: 5px solid yellow;
}

1. 第一种借助了linear-gradient实现从上到下的渐变效果，通过属性巧妙的达到锐变的效果。
2. 第二种和第一种类似还是依靠渐变效果，不过是从左到右的实现。比起第一种可调性更大。花样更多一点。
3. 第三种也是一种很不错，用的比较多的方法。就不过多解释了。

看到这里各位小伙伴们，有没有发现一个问题。哪天设计过来说，你这线怎么在文字后面，不是说让你划掉那段文字吗？？？这下尴尬了。
在这里我要介绍第四种了哈哈哈

1. 通过:after或者:before。元素相对定位，伪类绝对定位，设置border来实现覆盖住文字的效果。

好啦，到这里就算是讲完了。写的有点烂，CSS一直是我的弱项。希望可以帮到有需要的小伙伴们～