

おかしなところがあれば教えてご教授いただきたいです。  
[![画像の説明をここに入力](https://i.stack.imgur.com/euphT.png)](https://i.stack.imgur.com/euphT.png)

[code]

    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%);
    }
    
[/code]


CC BY-SA 4.0
2018-05-15T15:18:24.350
44008
2019-12-13T20:04:25.957
27824
question
html css wordpress
リストの番号が文字に重なってしまいます


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

[pug]

[code]

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

[css]

[code]

    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%;
    }
    
[/code]

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

[code]

    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%;
    }
[/code]

[code]

    <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>
[/code]

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

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

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


CC BY-SA 4.0
2018-05-18T03:58:45.997
44054
2019-12-13T20:04:25.957
2019-12-13T20:04:25.957
32986
27894
44008
answer