CSS：last-child和:: after

Question

我想在视觉上将“ delimiter”类的最后一个图标与其他图标分开。 在这种情况下，前3个图标应为黑色，后2个图标应为灰色，并且之间应使用定界符“ |”。 我可以结合使用：last-child和:: after吗？

<div class="content">
  <i class="fa fa-square delimiter" />
  <i class="fa fa-square delimiter" />
  <i class="fa fa-square delimiter" />
  <i class="fa fa-square" />
  <i class="fa fa-square" />
</div>


// css
.content i {
  position: relative;
  font-size: 14px;
  padding: 0 8px;
  color: rgba(0, 0, 0, 0.3);
}

.content i.delimiter {
  color: #000;
}


.content i.delimiter:last-child::after {
  content: '|';
  font-size: 18px;
  color: goldenrod;
  width: 200px;
  height: 200px;
  position: absolute;
  top: -5px;;
  left: 24px;;
}