Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

【CSS】リスト, li要素のマーカーを疑似要素で組んだ時の、インデントの調整方法。

More than 1 year has passed since last update.

こんなときに

  • リストのマーカーを自作したい
  • 自作したものの、テキストの折返しを以下画像のように揃えたい

sample.jpg

コード

※今回は、olの数字を擬似要素で置いた場合とする。

html (pug)

ol
    li あああああああああああああああ
    li いいいいいいい
    li うううううううううう
    li えええええええええええええええええええええええええ

css (scss)

ol {
  list-style: none;
  padding-left: 1.2em;
  li {
    counter-increment: cnt;
    text-indent: -1.2em;

    &::before {
      content: counter(cnt)'.'; 
      margin-right: 5px;
    }
  }
}

解説

マーカーをはみ出させる

折返しの位置を揃えるには、デフォルト状態でリスト内に含まれてしまっているマーカー部分、「1.」の部分をリストからはみ出させてあげれば良い。
text-indentは、テキストの頭をインデント、字下げするためにあるプロパティ。
これを利用する。

li {
    //略
    text-indent: -1.2em;
}

番号部分 + 番号の横にとったmargin-rightの分、 li要素でtext-indentをマイナスする。これは各々、マーカーの大きさによって確認しながら調整する。
liは指定された分だけ、頭文字、つまりマーカーが外に飛び出る理屈だ。

※ 今回は番号をテキストとして追加しているため、フォントサイズが都度変更になることを考慮して、emで指定している。
※ 大きさが変更にならないマーカーはpx指定でよい。

はみ出したマーカーを要素内に戻す

ul {
    //略
    padding-left: 1.2em;
}

その後、ul要素において、padding-left あるいは margin-left で引いた分の余白を与えてあげることで、要素外に飛び出したマーカーを要素範囲内に戻すことができる。

fadsfa.jpg

これは li要素に対してかけてもいいし、ulに対して背景やボーダーを
つけてなければ、さらに外側のdivでも可能。
要は位置を調節してるだけなので、数字が飛び出してもいい場合は必要ない。

実装サンプル

codepen

参考

li要素のテキストを折り返した時に頭文字の余白を揃えるやり方

dorara
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away