リストを作成する前提

アイコンなどが必要のないギャラリーやカードスタイルのul,olリストの利用では特に気にしなくてもいいのですが、アイコンがある箇条書きリストのような場合は複数行で二行目以降がずれているように感じたり視認性が良くない場合があります。

そんな場合にはhtmlとcssに一手間加えて汎用性と視認性が高い構成をめざします。

また、同じような表現が実現できる方法として:beforeを使用したり、もともとのcssプロパティlist-styleを使用する方法もありますが、今回は別の方法で考えたいと思います。

htmlとcss

See the Pen アイコンや注釈マークを使用した複数行リストの二行目以降を整える by perenote (@perenote) on CodePen.

リストアイテム（.u-list-item）にdisplay:flex;を指定して子要素を横並びにし、リストのアイコン（.u-list-item__icon）の右にマージンをとりレイアウトを調整しています。

.u-list{
  list-style: none; /* デフォルトのリストマーカーを無効化 */
  margin-top: 24px;
  .u-list-item{
    line-height: 1.75;
    margin-top: 8px;
    display: flex; /* アイコンとリストを横に並べる　*/
    .u-list-item__icon{
      margin-right: 8px; /* 各リストアイテムのアイコン右にマージンを設定 */
    }
  }
}

まとめ

最初に記載したようにcssだけで箇条書きリストにアイコンを付けて二行目以降のレイアウトを調整する事も可能です。
ただ、デザインによってはもう少し幅のある表現が必要な場合はhtmlで直接変更ができた上でレイアウトが整うように手を加えています。
特に今回のレイアウトではアイコン箇所を画像に変更しても大丈夫です。

今回は一つのulのなかで.u-list-itemを一定のルールを設けて書き換える事で統一感のあるリストを作成する事ができるので状況に応じて使い分けてください。