请求编写CSS实现图片所示的动态列表项样式

直接给你写好可用的代码，完全匹配你要的效果：

基础HTML结构（支持动态添加列表项） #

<ul class="target-list">
  <li>第一个列表项</li>
  <li>第二个列表项</li>
  <li>第三个列表项</li>
  <!-- 后续动态添加的项直接放在这里即可 -->
</ul>

对应的CSS代码 #

/* 清除列表默认的缩进和圆点 */
.target-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 400px; /* 可根据需要调整列表宽度，不想限制就删掉这行 */
}

/* 每个列表项的核心样式 */
.target-list li {
  padding: 12px 15px; /* 内容和边框的间距，避免贴边 */
  border-bottom: 1px solid #e0e0e0; /* 底部的分隔线 */
  font-size: 14px;
  color: #333;
  cursor: pointer; /* 鼠标放上去显示手型，不需要就删掉 */
}

/* 鼠标悬停时的高亮效果 */
.target-list li:hover {
  background-color: #f8f8f8;
}

/* 最后一个项去掉底部边框，避免多余线条 */
.target-list li:last-child {
  border-bottom: none;
}

简单说明 #

• 不管后续添加多少列表项，样式都会自动适配
• 如果要改颜色、间距，直接修改CSS里对应的数值就行（比如把#e0e0e0换成你要的分隔线颜色）
• 把CSS代码放到页面的<style>标签里，或者外部的.css文件中就能生效

内容的提问来源于stack exchange，提问作者user3278869