0

おかしなところがあれば教えてご教授いただきたいです。
画像の説明をここに入力

ol{
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0.5em;
  border: dashed 1px gray;
}

ol li{
  position: relative;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 30px;
}

ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  background: #74c2f8;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align:center;
  /*以下上下中央寄せのため*/
  top: 50%;
  -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
1
  • 上記のCSSで問題ないように思えますが、使用しているブラウザとバージョン、OSはどちらでしょうか?またサンプルでもいいので記載しているHTMLタグも記述できますでしょうか?
    – user10259
    Commented 2018年5月16日 8:23

1 件の回答 1

1

このような感じでいかがでしょうか?

[pug]

ol
  - for (var i = 0; x < 10; i++)
    li lorem

[css]

ol{
  counter-reset:number; /*数字をリセット*/
  list-style-type: none !important; /*数字を一旦消す*/
  padding: .5em;
  border: dashed 1px gray;
}

ol li{
  display: flex;
  margin-bottom: .5em;
  line-height: 1.5;
}

ol li:before{
  /* 以下数字をつける */
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  margin-right: .5em;
  text-align:center;
  background: #74c2f8;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  border-radius: 50%;
}

◆demo
https://codepen.io/harapeko/pen/ELOeoE?editors=1100

ol {
  counter-reset: number;
  /*数字をリセット*/
  list-style-type: none !important;
  /*数字を一旦消す*/
  padding: .5em;
  border: dashed 1px gray;
}

ol li {
  display: flex;
  margin-bottom: .5em;
  line-height: 1.5;
}

ol li:before {
  /* 以下数字をつける */
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  margin-right: .5em;
  text-align: center;
  background: #74c2f8;
  color: white;
  font-family: 'Avenir', 'Arial Black', 'Arial', sans-serif;
  font-weight: bold;
  font-size: 15px;
  border-radius: 50%;
}
<ol>
  <li>lorem</li>
  <li>lorem</li>
  <li>lorem</li>
  <li>lorem</li>
  <li>lorem</li>
  <li>lorem</li>
  <li>lorem</li>
  <li>lorem</li>
  <li>lorem</li>
  <li>lorem</li>
</ol>

◆原因
::beforeposition: absoluteを使ってliからの相対配置で指定しているのが重なる原因かと思います。

そのためliのテキストがフォントファミリーによって幅が違うため、重なる端末、ブラウザがあるのだと思います。

また、数字のカウントが2桁3桁となることも考慮すると浮かせるのは得策でないように思います。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。