嘿，这个需求太常见啦！要去掉最后一个事件的:after效果，用CSS的伪类就能轻松搞定，具体方法如下：

核心思路 #

利用:last-child伪类精准定位时间线容器里的最后一个section元素，然后将它的:after伪元素隐藏或者清空样式。

具体代码实现 #

结合你提供的现有样式，只需要添加下面这段CSS即可：

/* 移除最后一个时间线事件的:after伪元素 */
div[type="timeline"]>section:last-child:after {
  display: none;
}

如果你的:after伪元素是通过content属性生成内容的，也可以用另一种写法：

div[type="timeline"]>section:last-child:after {
  content: none;
}

补充说明 #

• 如果你的时间线容器里除了section还有其他子元素，那可以改用:last-of-type伪类，确保选中的是最后一个section：

  div[type="timeline"]>section:last-of-type:after {
    display: none;
  }
  

• 这个方法兼容性很好，主流浏览器（包括IE9+）都支持:last-child和:last-of-type伪类，不用担心兼容问题。

这样调整后，最后一个事件就不会再显示:after的连接效果啦，完美符合你的需求～

内容的提问来源于stack exchange，提问作者HELP