HTML 行与圆圈重叠

Question

实际上我有 2 个圆圈和一条线，它们重叠。我想在行的开头和结尾都有圆圈。

你能帮我画出圆圈之间的线吗？

Editable JSFiddle

HTML:

<div class="time-slice row">
  <div class="date-time">
    <p class="date">Fri 28 Aug</p>
    <p class="time">10:00</p>
  </div>
  <div class="circle-wrap">
    <div class="circle"></div>
  </div>
  <div class="point-title">
    <span>
      <b>Kiev Borispol (KBP)</b>
    </span>
  </div>
</div>

<div class="time-slice row">
  <div class="date-time">
    <p class="date">Fri 28 Aug</p>
    <p class="time">10:00</p>
  </div>
  <div class="circle-wrap">
    <div class="circle"></div>
  </div>
  <div class="point-title">
    <span>
      <b>Amsterdam (AMS)</b>
    </span>
  </div>
</div>

CSS:

.time-slice {
  display: flex;
  align-items: stretch;
  margin-left:20px;
  > * {
    padding: 20px;
  }
}

.circle {
  width: 16px;
  height: 16px;
  box-sizing: content-box;
  border-color: #29a8bb;
  background: #ffffff;
  border-radius: 32px;
  display: block;
  border: 2px solid blue;
}

.circle-wrap {
  position: absolute;
  > .circle {
    position: relative;
    left: -30px;
  }
}

.date-time {
  flex-shrink: 0;
  flex-basis: 100px;
}

.date,
.time {
  max-width: 90px;
  color: #999999;
  font-size: 13px;
  margin-top: 0px;
  margin-bottom: 10px;  
}

.point-title {
  border-left: 2px solid blue;
}

感谢您的帮助!

Answer 1

您可以使用 :not() 选择器在最后一个圆之后不画线。

.time-slice.row:not(:last-child)  .point-title 

http://codepen.io/anon/pen/OyJqMW