【CSS】改行時の空白をつくって2行目以降を下げる方法

WEB サイト内の注釈でよくある※マークだけが左に浮き出ているタイプのデザイン。

完成形

ただ、ありがちなのが改行すると※マーク部分も食い込んで表示するパターン。（下のやつみたいな。）こうならないように、今回は ※マークだけ浮き出るデザインにする方法をまとめます。

前提となるコード

まず、前提となるコードは以下の通り。 liタグのbefore属性に※マークをつけています。

<ul>
  <li>
    QS とは Quality Start の略であり、1985年にスポーツライター John Lowe
    により提唱された。これは先発投手が少なくとも6イニングを投げ、ER (Earned
    Runs＝自責点) を3以下に抑えた場合に達成される指標で、いわゆる「試合を作れた
  </li>
</ul>

ul {
  list-style: none;
}
li:before {
  content: "※";
}

ただ、before 属性にコンテンツを入れてつくっても、改行すると2行目以降インデントが上がった状態で文章がはじまってしまいます。

こんな感じに…。

解決策1

結論、positionとpaddingを使って調整します。

<ul>
  <li>
    QS とは Quality Start の略であり、1985年にスポーツライター John Lowe
    により提唱された。これは先発投手が少なくとも6イニングを投げ、ER (Earned
    Runs＝自責点) を3以下に抑えた場合に達成される指標で、いわゆる「試合を作れた
  </li>
</ul>

ul {
  list-style: none;
}
li {
  position: relative;
  padding-left: 24px;
}
li:before {
  content: "※";
  left: 0;
  position: absolute;
}

完成形

liタグを親要素、li:before属性を子要素としてpositionを適用させます。※マーク分の余白はliタグのpadding-leftで調整すると2行目以降も空白を維持することができます。

解決策2

あと、コンテンツ自体のmarginを取って、最初のテキストインデントだけをマイナスに調整するやり方もあります。

<ul>
  <li>
    QS とは Quality Start の略であり、1985年にスポーツライター John Lowe
    により提唱された。これは先発投手が少なくとも6イニングを投げ、ER (Earned
    Runs＝自責点) を3以下に抑えた場合に達成される指標で、いわゆる「試合を作れた
  </li>
</ul>

ul {
  list-style: none;
}
li {
  margin-left: 2rem;
  text-indent: -1.2rem;
}
li:before {
  content: "※";
}

完成形

仕組みとしては、※マーク分だけコンテンツ全体を左側に余白を取って、余白を取った分、最初の行を text-indent をマイナスにして左に寄せるという仕組み。

ただ、このやり方はbefore属性のコンテンツの幅によってtext-indentの値も変動する分、難しいです。解決策1のやり方が無難ですね。

ということで、※マークだけ浮き出した改行時の空白ができるコーディングでした。

2行目以降を下げてコンテンツの文字を揃えるデザインは結構デザイナーがよくやってほしいみたいな要求をしてくる印象なので、参考になれば幸いです。