Question

我正在构建一个垂直时间轴作为＆lt; ul＆gt;与＆lt; li＆gt; s作为事件。 这是意图：

我已经足够轻松地定制子弹了，我用背景渐变制作了垂直线;我无法做的一件事就是在顶部和底部终止垂直线。

到目前为止，它看起来像这样：

我的SCSS代码：

ul.timeline {
    list-style: none;
    color: red;
    font-size: .8em;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+5,d8d8d8+6,d8d8d8+7,ffffff+8,ffffff+100 */
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(left, #ffffff 0%, #ffffff 1px, #d8d8d8 2px, #d8d8d8 3px, #ffffff 4px, #ffffff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #ffffff 0%,#ffffff 1px, #d8d8d8 2px, #d8d8d8 3px, #ffffff 4px,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #ffffff 0%,#ffffff 1px, #d8d8d8 2px, #d8d8d8 3px, #ffffff 4px,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */

    background-position: 29px 0;

    li {

        &::before {
            content: "\26AB";
            font-size: 1.3em;
            color: #d8d8d8;
            display: inline-block;
            width: 1em;
            margin-left: -1em;
            vertical-align: middle;
        }

        a {
            color: black;
            text-decoration: underline;
        }
    }
}

我的HTML代码：

<ul class="timeline">
  <li><a href="">asd as</a></li>
  <li><a href="">werwer we</a></li>
</ul>

我知道我可以废弃整个自定义子弹和背景渐变css并使用背景图像执行此操作，我只是希望找到一个仅限CSS的解决方案。

Answer 1

您可以使用伪元素，一个用于圆圈，另一个用于该行，:not(:last-child)，因此您不必在最后一个元素上设置线条。

＆＃13;

ul {
  list-style: none;
}
li {
  position: relative;
  padding: 10px;
}
li a {
  color: gray;
}
li:before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #D8D8D8;
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-40%);
}

li:not(:last-child):after {
  content: '';
  width: 2px;
  height: 100%;
  background: #D8D8D8;
  position: absolute;
  left: -8px;
  top: 50%;
}

＆＃13;

<ul class="timeline">
  <li><a href="">asd as</a></li>
  <li><a href="">werwer we</a></li>
  <li><a href="">werwer we</a></li>
</ul>

＆＃13;

Answer 2

使用背景渐变的方法......

＆＃13;

  private restorePurchases(): Promise<any[]> {
    return new Promise<any[]>((resolve) => {
      let data: any[] =
        [
          {
            productId: '3days',
            date: 1499841497305
          },
          {
            productId: '10days',
            date: 1499841498305
          },
          {
            productId: '3days',
            date: 14998414979305
          }
        ];

      resolve(data);
    });
  }

＆＃13;

ul.timeline {
  list-style: none;
  color: red;
  font-size: .8em;
  position: relative;
}

.timeline::before {
  position: absolute;
  content: "";
  display: block;
  height: 80px;
  width: 30px;
  top: 6px;
  left: 0;
  background: radial-gradient(circle, grey 20%, transparent 20%);
  background-size: 50px 25px;
}

.timeline::after {
  position: absolute;
  content: "";
  display: block;
  top: 8px;
  left: 24px;
  height: 70px;
  width: 1px;
  background: grey;
}

.timeline li {
  padding: .5em;
}

a {
  color: black;
  text-decoration: underline;
}

＆＃13;

CSS：自定义项目符号：作为时间轴加入

2 个答案: