CSSで作るhrのスタイルいろいろ

Result

See the Pen <a href='https://codepen.io/kachibito/pen/QabWEN/'> 18 Simple Styles for Horizontal Rules (hr CSS Design) </a> by kachibito (<a href='https://codepen.io/kachibito'>@kachibito</a>) on <a href='https://codepen.io'>CodePen</a>.<br />
タイトルでCSSで作ると書いちゃいましたが一部画像が使われてます・・・
ジグザグはどうにかなるみたいです

See the Pen <a href='https://codepen.io/kachibito/pen/LeVRLE/'>Zigzag Horizontal Rule</a> by kachibito (<a href='https://codepen.io/kachibito'>@kachibito</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

css

hr.style15 {/*線*/
  border-top: 4px double #8c8b8b;
  text-align: center;
}
hr.style15:after {/*アイコン*/
  content: '\002665';
  display: inline-block;
  position: relative;
  top: -15px;
  padding: 0 10px;
  background: #f0f0f0;
  color: #8c8b8b;
  font-size: 18px;
}

html

<hr class="style15">

via

18 Simple Styles for Horizontal Rules (hr CSS Design)

Result

css

html

via

Resources & Tools

OSS

AI

CSS snippet

JavaScript snippet

WordPress Code