web中如何给无序列表下加一条分割线

在Web中，要在无序列表（<ul>）下方添加一条分割线，可以采用以下几种方式：

1. **HTML + CSS**:
使用 `<hr>` 标签创建水平线，然后放置在列表之后：

   <ul>
     <!-- 列表项 -->
   </ul>
   <hr>

或者，如果你想将HR作为列表的一部分，可以把它放在最后一个列表项之后，例如：

   <ul>
     <!-- 列表项... -->
   </ul>
   <li><hr></li>

配合CSS来美化线条样式，如宽度、颜色等。

2. **CSS伪元素**:
通过`:after`伪元素添加到每个`<li>`元素后，然后统一设置样式：

   ul li::after {
     content: "";
     display: block;
     height: 1px;
     background-color: #ccc; /* 分割线颜色 */
     margin-top: 10px; /* 距离列表项顶部的距离 */
   }

3. **响应式设计**:
使用媒体查询，针对不同的设备尺寸调整线条显示：

ul li::after {
  /* ...常规样式 */
}

@media (min-width: 768px) {
  ul li::after {
    /* 在大屏设备上使用不同的样式 */
  }
}