时间戳

首页 > 解决方案 > CSS :last-child 和 ::after

css - CSS :last-child 和 ::after

问题描述

我想在视觉上将带有“分隔符”类的最后一个图标与其他图标分开。在这种情况下，前 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;;
}

标签： csscss-selectorspseudo-elementpseudo-class

解决方案

推荐阅读