【備忘録：HTML/CSS】cssのストック集って持ってたほうがいいよね？

使えるcssデザインストック

見出し下線を2配色

index.html

<h2 class="m-heading2_pseudo-class">お知らせ（before、after）</h2>
<h2 class="m-heading2_borderimage">お知らせ（border-image）</h2>

style.scss

.m-heading2_pseudo-class{
  font-size: 24px;
  position: relative;
  max-width: 400px;
  padding-bottom: 10px;
  &:before{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 5px;
    background: #e3bf00;
  }
  &:after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 80px;
    width: calc(100% - 100px);
    height: 5px;
    background: #000;
  }
}
.m-heading2_borderimage{
  border-image: linear-gradient(.25turn,#e3bf00 80px,#111 80px) 1/0 0 5px 0;
  border-bottom: solid;
  max-width: 400px;
  padding-bottom: 10px;
}

見出し下線を中央で2配色

index.html

<h2 class="m-heading2_linecenter">お知らせ</h2>

style.scss

.m-heading2_linecenter{
  text-align: center;
  padding-bottom: 10px;
  border-image: linear-gradient(
                90deg,
                #ddd 45%,#e3bf00 45%,
                #e3bf00 55%,#ddd 55%) 1/0 0 5px 0;
  border-bottom: solid;
}

参考元：
https://note.com/pulpstyle