cssでひし形の下線を引きたいとき

デザイナーさんからひし形の下線を引きたいって言われたので、cssで実装してみた！

見た目

↑こういうの実装したいとき！

html

htmlはいたってシンプル。
ポイントはspanで囲んであげること。
こうしないと、下線が横100%になっちゃう！

<ul>
  <li><span>ほにゃらら</span></li>
  <li><span>ほにゃらら</span></li>
</ul>

scss

苦労したのは、左右に分割するところ。
backgroud-size: 50% 50%; みたいに分割できるかと思ったらできなかったので、結局beforeとagterに分けた！

ul{
  li{
    span{
      position: relative;
      &::before, &::after{
        content: '';
        position: absolute;
        left: 0;
        bottom: -10px;
        display: inline-block;
        width: 20%;
        height: 5px;
        background-color:
          $clr_yellow_2;
        background: linear-gradient(135deg, transparent 5px, $clr_yellow_2 5px);
      }
      &::after{
        width: 80%;
        left: 20%;
        background: linear-gradient(315deg, transparent 5px, $clr_yellow_2 5px);
      }
    }
  }
}

css

展開するとこんな感じ。
（変数は $clr_yellow_2: #fddc00; が上の方に書いてあったと思われ！）

ul li span {
  position: relative;
}

ul li span:before, ul li span:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px;
  display: inline-block;
  width: 20%;
  height: 5px;
  background-color: #fddc00;
  background: linear-gradient(135deg, transparent 5px, #fddc00 5px);
}

ul li span:after {
  width: 80%;
  left: 20%;
  background: linear-gradient(315deg, transparent 5px, #fddc00 5px);
}

まとめ

これくらいのちょっとした飾り付けならサクッとcssで書けちゃうのはいい時代になったよねー。
昔に比べてメンテナンスが楽になった！