お洒落で即使えそうなCSS　その１

最近シンプルな見出しが流行っているような気がするので3つ程参考までにどうぞ！

h2 {
  font-size: 24px;
}

h2 {
  position: relative;
  margin: 40px -19px 30px;
  padding: 12px 10px;
  border-left: none;
}

h2::before, h2::after {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 5px;
  content: "";
}

h2::before {
  z-index: 2;
  width: 30%;
  background-color: #474a4d;
}

h2::after {
  width: 100%;
  background: -webkit-repeating-linear-gradient(-45deg, #fff, #fff 2px, #aaa 2px, #aaa 4px);
  background:         repeating-linear-gradient(-45deg, #fff, #fff 2px, #aaa 2px, #aaa 4px);
}

h2 {
   position:relative;
  color:#111;border-bottom:5px solid #ccc;
  padding:0 10px 4px 1px;margin:53px 0 24px;
  word-break:break-all;line-height:1.4
}

h2::before {
  position:absolute;top:100%;
  left:0;width:29.3%;
  height:5px;background-color:#1eb2b2;
  z-index:2;
  content:''
}

h2  {
  display: block;
  margin: 10px auto;
  padding: 0;
  color: #fff;
  font-size: 18px;
  font-weight: normal;
  border-bottom: 2px solid #289dcc;
  overflow: hidden;
}


h2 span {
  padding: 10px 10px;  
  box-sizing: border-box;
  line-height: 2.1;
  
  background-color: #289dcc;
}