css ol 上图下字

CSS中的ol元素通常用于创建有序列表，而使用ol上图下字的样式可以增强列表的可读性，让用户更容易理解内容。下面是一个使用CSS ol上图下字的示例。

<ol class="number-icon">
  <li>
    <div class="list-item">
      <img src="image-1.png" alt="">
      <p>这是第一行内容</p>
    </div>
  </li>
  <li>
    <div class="list-item">
      <img src="image-2.png" alt="">
      <p>这是第二行内容</p>
    </div>
  </li>
  <li>
    <div class="list-item">
      <img src="image-3.png" alt="">
      <p>这是第三行内容</p>
    </div>
  </li>
</ol>

.number-icon li {
  position: relative;
  margin-bottom: 20px;
}
.number-icon li:before {
  content: counter(number) ' ';
  counter-increment: number;
  position: absolute;
  top: 0;
  left: -30px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  width: 20px;
  height: 20px;
  line-height: 20px;
  background: red;
  border-radius: 50%;
}
.list-item {
  display: flex;
  align-items: center;
}
.list-item img {
  margin-right: 20px;
}

代码中，我们首先定义了ol元素的样式为.number-icon。接着，我们对每一个列表项li进行定位，并利用CSS计数器属性来生成序号。最后，我们添加.list-item类来让每个列表项中的图像和内容对齐，并采用flex布局来实现。

通过这段代码，我们可以创建出一个简单而美观的有序列表，使得列表更加易于阅读和理解。