如何在带有伪元素::的li上进行onclick事件：

Question

我已经使用和

元素创建了时间轴。结果如下：

我需要点击第二个圆圈，然后自动在第一个圆圈与第二个圆圈之间的线开始加载另一种颜色，例如从第一个按钮到第二个按钮的进度条， 使它看起来像真实的时间表。

问题是我不知道如何在任何圆圈中检测到单击，因为这些圆圈是使用伪元素::之前创建的。

这是我的代码：

func addTap(_ lbl:UILabel) {
  lbl.isUserInteractionEnabled = true 
  lbl.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(ViewController.tapFunction)))
} 

ul {
  align-content: center;
  align-items: center;
  /* counter-reset: stepCount;*/
  display: flex;
  justify-content: space-around;
  margin-top: 40px;
  /* for codepen */
}

li {
  background: /*dodgerblue; */
  #DBAC78;
  color: white;
  content: ' ';
  display: flex;
  flex-grow: 1;
  height: .3em;
  line-height: 1em;
  margin: 0;
  position: relative;
  text-align: right;
  z-index: -1;
  cursor: pointer;
}

li::before {
  color: white;
  background: /*dodgerblue; */
  #DBAC78;
  border-radius: 50%;
  /*counter-increment: stepCount;*/
  content: '';
  /*counter(stepCount); */
  height: 2em;
  left: -2em;
  line-height: 2em;
  position: absolute;
  text-align: center;
  top: -.85em;
  width: 2em;
}

li.video::before {
  color: #3A1101;
  background: /*dodgerblue; */
  #DBAC78;
  border-radius: 50%;
  /*counter-increment: stepCount;*/
  content: '\f04b';
  /*url('img/play2.png');*/
  /*counter(stepCount); */
  height: 2em;
  left: -2em;
  line-height: 2em;
  position: absolute;
  text-align: center;
  top: -.85em;
  width: 2em;
  font-family: FontAwesome !important;
  vertical-align: top;
  font-weight: 700;
}

li.question::before {
  color: #3A1101;
  background: /*dodgerblue; */
  #DBAC78;
  border-radius: 50%;
  /*counter-increment: stepCount;*/
  content: '?';
  /*counter(stepCount); */
  height: 2em;
  left: -2em;
  line-height: 2em;
  position: absolute;
  text-align: center;
  top: -.85em;
  width: 2em;
  font-weight: 700;
  font-size: 1.7em;
}

li.active {
  background-color: /*lightblue;*/
  #DBAC78;
}

li.active~li {
  background-color: /*lightblue;*/
  #DBAC78;
}

li.active~li::before {
  background-color: /*lightblue;*/
  #DBAC78;
}

li.video {
  background-color: /*lightblue;*/
  #DBAC78;
}

li.video~li {
  background-color: /*lightblue;*/
  #DBAC78;
}

li.video~li::before {
  background-color: /*lightblue;*/
  #DBAC78;
}

li.question {
  background-color: /*lightblue;*/
  #DBAC78;
}

li.question~li {
  background-color: /*lightblue;*/
  #DBAC78;
}

li.question~li::before {
  background-color: /*lightblue;*/
  #DBAC78;
}

li:last-child {
  flex-basis: 0;
  flex-grow: 0;
  flex-shrink: 1;
  /* Shorthand: flex: 0 1 0; */
}

ul.bigger {
  font-size: 1.2em;
}

ul.highlight-active li.active::before {
  font-size: 1.6em;
  background: /*maroon;*/
  #DBAC78;
}

ul.highlight-active li.video::before {
  font-size: 2em;
  background: /*maroon;*/
  #DBAC78;
}

ul.highlight-active li.question::before {
  font-size: 1.3em;
  background: /*maroon;*/
  #DBAC78;
}

ul.roman li::before {
  content: counter(stepCount, upper-roman);
}

ul.triangle li::before {
  width: 0;
  height: 0;
  border-radius: 0;
  border-left: 1em solid white;
  border-right: 1em solid white;
  border-bottom: .8em solid/*dodgerblue;*/
  #DBAC78;
  content: '';
  top: -.65em;
}

ul.triangle li:first-child::before {
  left: 0;
}

ul.triangle li.active~li::before {
  border-bottom-color: /*lightblue;*/
  #DBAC78;
}

ul.triangle li.video~li::before {
  border-bottom-color: /*lightblue;*/
  #DBAC78;
}

ul.triangle li.question~li::before {
  border-bottom-color: /*lightblue;*/
  #DBAC78;
}

#containerTimeLine {
  width: 80%;
  margin-left: 120px;
  ;
  margin-right: 0;
  padding-right: 40px;
  padding-top: 30px !important;
}

我如何才能检测到圆圈中的点击并使用javascript / jquery执行事件，该事件可以通过进度条之类的过渡来更改圆圈之间的线条颜色？