list-style-typeの代替メモ

list-style-typeでdescやdecimalを使うと、
マーカーの表示位置がブラウザによって異なるため要素の位置が揃いません。
これを揃えるには、list-style-typeの代わりにCSSでマーカーを付けます。

ul (list-style-type:desc; の代替)


ul {
  list-syule-type: none;
}
ul li {
  position: relative;
  padding: 0 0 0 1.4em;
}
ul li:before {
  content: "・";
  position: absolute;
  left: 0;
}

ol (list-style-type:decimal; の代替)


ol {
  counter-reset: num;
  list-syule-type: none;
}
ol li {
  counter-increment: num;
  position: relative;
  padding: 0 0 0 1.4em;
}
ol li:before {
  content: counter(num)".";
  position: absolute;
  left: 0;
}

Leave a Reply

Your email address will not be published. Required fields are marked *