树格管偏移

Question

我正在尝试为树网格创建一个管模块。我想将管保持为一个块，并将每列作为块内的元素。我想对管子施加一个偏移，所以下面的管子有一个凹痕，但是我遇到了一个问题，列边界排成一行。如何将偏移应用于块的第一列而不将其应用于整个管。

这是HTML：

<div class="m-tube">
<div class="m-tube__column">
<span class="m-tube__column--icon"></span>
<div class="m-tube__text">Lorem Ipsum</div>
</div>
<div class="m-tube__column">
<div class="m-tube__text">Tempus Fugit</div>
</div>
<div class="m-tube__column">
<div class="m-tube__text">Fac Ut Gaudeum</div>
</div>
<div class="m-tube__column">
<div class="m-tube__text">Lorem Ipsum Dolor Sit Amet</div>
</div>
<div class="m-tube__column m-tube__column--no-border">
<div class="m-tube__text">Caveat Emptor</div>
</div>
</div>
<div class="m-tube">
<div class="m-tube__column">
<span class="m-tube__column--icon"></span>
<div class="m-tube__text">Lorem Ipsum</div>
</div>
<div class="m-tube__column">
<div class="m-tube__text">Tempus Fugit</div>
</div>
<div class="m-tube__column">
<div class="m-tube__text">Fac Ut Gaudeum</div>
</div>
<div class="m-tube__column">
<div class="m-tube__text">Lorem Ipsum Dolor Sit Amet</div>
</div>
<div class="m-tube__column m-tube__column--no-border">
<div class="m-tube__text">Caveat Emptor</div>
</div>
</div>

这是SCSS：

.m-tube {
  border: 1px solid silver;
  border-radius: 3rem;
  width: auto;
  height: 3.5rem;
  display: table;
  &:hover {
    background-color: lightblue;
  }
  &--no-end-cap {
    border-radius: 3rem 0 0 3rem;
    border-right: 0;
  }
  &__column {
    border-right: 1px solid silver;
    padding: 0 0.5rem;
    height: 100%;
    display: inline-table;
    //vertical-align: middle;
    &--no-border {
      border-right: 0;
    }
    &--icon {
      background-color: red;
      height: 1.5rem;
      width: 1.5rem;
    }
  }
  &__text {
    line-height: 3.4rem;
    color: #01527a;
    font-size: 1.1rem;
    font-family: Helvetica, Arial, sans-serif;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}