How Can I make onclick event on a li with pseudo-element ::before

Question

I have created a Timeline using and

elements. The result looks like that:

I need to click on the second circle and automatically the line that is between first and second circle has to start loading with another color, something like a progress bar from the first button to the second button, to make it look like a real timeline.

The problem is that I do not know how to detect the click in any of those circles cause these were created with the pseudo element :: before.

This is my code:

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;
}

<div class="container" id="containerTimeLine">

  <ul class="bigger highlight-active">
    <li onclick="PlayAudios();"></li>
    <!-- class="active" -->
    <li class="video"></li>
    <li class="question"></li>
    <li class="question"></li>
    <li class="question"></li>
    <li class="question"></li>
    <li></li>
  </ul>

</div>

How could I detect the click in the circles and execute an event with javascript / jquery that allows to change the color of the line that is between the circles, with a transition like a progress bar?

Answer 1

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;
}

<div class="container" id="containerTimeLine">

  <ul class="bigger highlight-active">
    <li onclick="PlayAudios();"></li>
    <!-- class="active" -->
    <li class="video"></li>
    <li class="question"></li>
    <li class="question"></li>
    <li class="question"></li>
    <li class="question"></li>
    <li></li>
  </ul>

</div>