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%);
}
-
上記のCSSで問題ないように思えますが、使用しているブラウザとバージョン、OSはどちらでしょうか?またサンプルでもいいので記載しているHTMLタグも記述できますでしょうか?– user10259Commented 2018年5月16日 8:23
コメントを追加
|
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>
◆原因
::before
をposition: absolute
を使ってliからの相対配置で指定しているのが重なる原因かと思います。
そのためliのテキストがフォントファミリーによって幅が違うため、重なる端末、ブラウザがあるのだと思います。
また、数字のカウントが2桁3桁となることも考慮すると浮かせるのは得策でないように思います。