The number on the list overlaps with the characters.

Please let me know if there is anything strange.

ol{
  counter-reset:number; /* reset the number */
  list-style-type: none!important; /* Clear the number */
  padding —0.5em;
  border —dashed1px gray;
}

olli{
  position:relative;
  line-height: 1.5em;
  padding —0.5em 0.5em 0.5em 30px;
}

olli:before {
  /* Number below */
  position:absolute;
  counter-increment:number;
  content:counter(number);
  /* Change the number design*
  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;
  /* To center up and down */
  top: 50%;
  -moz-transform:translateY (-50%);
    - webkit-transform:translateY (-50%);
    -o-transform:translateY (-50%);
    -ms-transform:translateY (-50%);
    transform —translateY (-50%);
}

html css wordpress

2022-09-30 19:09

1 Answers

How about this?

[pug]

ol
  - for (vari=0;x<10;i++)
    lilorem

[css]

ol{
  counter-reset:number; /* reset the number */
  list-style-type: none!important; /* Clear the number */
  padding : .5em;
  border —dashed1px gray;
}

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

olli:before {
  /* Number below */
  counter-increment:number;
  content:counter(number);
  /* Change the number design*
  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;
  /* Reset Numbers*/
  list-style-type: none!important;
  /* Erase the number once*/
  padding : .5em;
  border —dashed1px gray;
}

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

olli:before {
  /* Number below */
  counter-increment:number;
  content:counter(number);
  /* Change the number design*
  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>

◆Cause
I think the overlapping reason is that :before is specified in the relative placement from li using position:absolute.

Therefore, li's text varies depending on the font family, so I think there are overlapping devices and browsers.

Also, considering that the number count is two or three digits, I don't think it's a good idea to float it.

2022-09-30 19:09

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656