Contents

1. 1. 仿iOS列表风格（下划线）
   1. 1.0.0.1. 方法一：伪元素
   2. 1.0.0.2. 方法二：background

仿iOS列表风格（下划线）

@(博客)[CSS]

• 从图中我们可以看到这个列表中每个子项都有一根底边线，并且除了最后一根边线是全封闭的外，其余的边线都是非封闭型，距左侧有一定的空白间隙；需要注意的是，当某个子项被选中或激活时，其反馈区域是整行，未封闭区域的背景色也需要改变

方法一：伪元素

HTML如下：

<div class="container">
    <ul class="demo">
        <li>Lady gaga</li>
        <li>Mariah Carey</li>
        <li>Adele</li>
        <li>Avirl Lavigne</li>
        <li>Sarah Brightman</li>
        <li>Celin Dion</li>
    </ul>
</div>

CSS如下：

  * {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "微软雅黑";
}

.container {
  background: #eee;
  padding: 10px;
  /*width: 100px;*/
}

.demo {
  background: #fff;
}

/*方法一*/
.demo li {
  line-height: 40px;
  padding-left: 15px;
  position: relative;
}

.demo li::after {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  border-bottom: 1px solid #ccc;
  content: "";
}

.demo li:not(:last-child)::after {
  left: 15px;
}

.demo li:hover {
  background: #f9f9f9;

codepen：

See the Pen backgournd-pseudo by Wing (@winguno) on CodePen.

方法二：background

HTML如下：

<div class="container">
    <ul class="demo">
        <li>Lady gaga</li>
        <li>Mariah Carey</li>
        <li>Adele</li>
        <li>Avirl Lavigne</li>
        <li>Sarah Brightman</li>
        <li>Celin Dion</li>
    </ul>
</div>

CSS如下：

* {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "微软雅黑";
}

.container {
  background: #eee;
  padding: 10px;
  /*width: 100px;*/
}

.demo {
  background: #fff;
}

/*方法二*/
.demo li {
  padding-left: 15px;
  line-height: 40px;
  background: #fff linear-gradient(transparent 39px, #ccc 39px, #ccc) no-repeat;
  /*这里的linear-gradient当然要做浏览器兼容问题了~*/
}

.demo li:not(:last-child) {
  background-origin: content-box;
}

.demo li:hover {
  background-color: #f3f3f3;
  /*注意：这里的background-color不能用background代替*/
}

codepen：

See the Pen background-linear-gradient by Wing (@winguno) on CodePen.

详情参考：background系列之无处不在的妙趣