[分享]css两个li之间插入p

CSS插入p标签是网页设计中一个非常常见的技巧，而在实际的运用过程中，往往会涉及到在两个li标签之间插入p标签的操作。下面我们就来介绍一下这个操作的具体实现方式。 列表项1 列表项2 列表项3 列表...

CSS插入p标签是网页设计中一个非常常见的技巧，而在实际的运用过程中，往往会涉及到在两个li标签之间插入p标签的操作。下面我们就来介绍一下这个操作的具体实现方式。

 <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
  </ul>

  <style>
    li + li:before {
      content: "";
      display: block;
      border-bottom: 1px solid #ccc;
      margin-bottom: 10px;
    }
  </style> 

以上代码实现了在两个li标签之间插入p标签的效果。具体操作是通过在第二个li标签前面插入一个伪元素，然后对这个伪元素进行样式调整，最终实现一个插入p标签的效果。

通过这个操作，我们可以很方便的实现像文章列表、网站导航等布局需求，同时也可以让页面内容更加清晰、易于阅读。