關於在一段文字上加修飾劃線的效果

weixin_33840661發表於2018-04-14

最近遇到一個需求，要在一段文字上面加上一條背景色。類似於上學時候用的記號筆做筆記一樣的效果。
第一映像想到的可能是text-decoration: line-through；不過這裡有一個問題，先上圖：

clipboard.png

<div id='s5'>放學<span>啦啦</span></div>
#s5{
  text-decoration: line-through;
}
#s5 span{
  font-size: 60px;
}

很明顯因為文字大小不一致，導致line-through的位置會錯位。

再看下圖的解決辦法，這裡就沒有改變個別文字的大小了。小夥伴們自己可以動手試一試。

clipboard.png

附上程式碼：

<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一直是我的弱項。希望可以幫到有需要的小夥伴們～

相關文章