Point Headig Design

jsdo.it

画像のとこにはアイコンとか入れる。

Code

html

  <h4 class="point_heading">ほにゃららららら</h4>
  <h4 class="point_heading">ほにゃららららら</h4>
  <h4 class="point_heading">ほにゃららららら</h4>

css

.point_heading {
  counter-increment: point-1;
  color: #4D2D00;
  font-size: 15px;
}

.point_heading:before {
  background: url(http://lorempixel.com/15/15/) no-repeat 0 50%;
  border-right: 1px dotted #4D2D00;
  content: "Point." counter(point-1);
  color: #E38B1D;
  font-weight: bold;
  margin: 0 10px 0 0;
  padding: 0 10px 0 20px;
}

その他

画像はこちらで用意したのではなく。lorempixelってサービス使った。便利