删除最后一个“：before”元素

Question

大家好，所以我正在制作一个简单的图表，其中有5个盒子，然后是箭头，所以它应该是这样的：

- > - > - > - > -

然而由于某种原因，我在第五个方框后面出现了一个额外的箭头，我不想要这个，任何帮助摆脱最后一个箭头都会很棒

.work_process {
  position: relative;
  text-align: center;
  margin: 0 auto;
}

.work_process:before {
  font-family: FontAwesome;
  content: '\f178';
  margin-top: -10px;
  position: absolute;
  right: -10px;
  top: 40%;
  font-size: 32px;
}

.work_process .work_process-box {
  outline: 4px solid #FFFFFF;
  border-radius: 50%;
  height: 120px;
  margin: 2em auto 3em;
  padding: 16px 10px;
  width: 120px;
}

.work_process-box i {
  font-size: 32px;
  line-height: 52px;
  width: 52px;
  color: #FFFFFF;
}

.work_process-box h4 {
  font-weight: 400;
  margin: 0;
  color: #FFFFFF;
}

<div class="parallax2">
  <div class="info1">
    <h1>DESGIN PROCESS</h1>
    <span class="border"></span>
    <div class="row">
      <div class="col-xs-6 col-sm-4 col-md-3">
        <!-- work_process -->
        <div class="work_process">
          <div class="work_process-box">
            <i class="fa fa-lightbulb-o"></i>
            <h4>IDEA</h4>
          </div>
        </div>
        <!-- work_process -->
      </div>

      <div class="col-xs-6 col-sm-4 col-md-2">
        <!-- work_process -->
        <div class="work_process">
          <div class="work_process-box">
            <i class="fa fa-bank"></i>
            <h4>DESIGN</h4>
          </div>
        </div>
        <!-- work_process -->
      </div>

      <div class="col-xs-6 col-sm-4 col-md-2">
        <!-- work_process -->
        <div class="work_process">
          <div class="work_process-box">
            <i class="fa fa-comments-o"></i>
            <h4>DEVELOP</h4>
          </div>
        </div>
        <!-- work_process -->
      </div>

      <div class="col-xs-6 col-sm-4 col-md-2">
        <!-- work_process -->
        <div class="work_process">
          <div class="work_process-box">
            <i class="fa fa-desktop"></i>
            <h4>TEST</h4>
          </div>
        </div>

        <!-- work_process -->
      </div>


      <div class="col-xs-6 col-sm-4 col-md-2">
        <!-- work_process -->
        <div class="work_process">
          <div class="work_process-box">
            <i class="fa fa-rocket"></i>
            <h4>LAUNCH</h4>
          </div>
        </div>
        <!-- work_process -->
      </div>
    </div>
  </div>
</div>

Answer 1

以下代码将修复它：

.row > div:last-child .work_process:before {  content: "";  }

此代码选择.row div的最后一个直接子项，并选择该子项的.work_process:before，并将内容设置为空。

＆＃13;

＆＃13;

.row > div:last-child .work_process:before {  content: "";  }

.work_process {
  position: relative;
  text-align: center;
  margin: 0 auto;
}

.work_process:before {
  font-family: FontAwesome;
  content: '\f178';
  margin-top: -10px;
  position: absolute;
  right: -10px;
  top: 40%;
  font-size: 32px;
}

.work_process .work_process-box {
  outline: 4px solid #FFFFFF;
  border-radius: 50%;
  height: 120px;
  margin: 2em auto 3em;
  padding: 16px 10px;
  width: 120px;
}

.work_process-box i {
  font-size: 32px;
  line-height: 52px;
  width: 52px;
  color: #FFFFFF;
}

.work_process-box h4 {
  font-weight: 400;
  margin: 0;
  color: #FFFFFF;
}

＆＃13;

<div class="parallax2">
  <div class="info1">
    <h1>DESGIN PROCESS</h1>
    <span class="border"></span>
    <div class="row">
      <div class="col-xs-6 col-sm-4 col-md-3">
        <!-- work_process -->
        <div class="work_process">
          <div class="work_process-box">
            <i class="fa fa-lightbulb-o"></i>
            <h4>IDEA</h4>
          </div>
        </div>
        <!-- work_process -->
      </div>

      <div class="col-xs-6 col-sm-4 col-md-2">
        <!-- work_process -->
        <div class="work_process">
          <div class="work_process-box">
            <i class="fa fa-bank"></i>
            <h4>DESIGN</h4>
          </div>
        </div>
        <!-- work_process -->
      </div>

      <div class="col-xs-6 col-sm-4 col-md-2">
        <!-- work_process -->
        <div class="work_process">
          <div class="work_process-box">
            <i class="fa fa-comments-o"></i>
            <h4>DEVELOP</h4>
          </div>
        </div>
        <!-- work_process -->
      </div>

      <div class="col-xs-6 col-sm-4 col-md-2">
        <!-- work_process -->
        <div class="work_process">
          <div class="work_process-box">
            <i class="fa fa-desktop"></i>
            <h4>TEST</h4>
          </div>
        </div>

        <!-- work_process -->
      </div>


      <div class="col-xs-6 col-sm-4 col-md-2">
        <!-- work_process -->
        <div class="work_process">
          <div class="work_process-box">
            <i class="fa fa-rocket"></i>
            <h4>LAUNCH</h4>
          </div>
        </div>
        <!-- work_process -->
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;