jQuery如何选择CSS伪元素

Question

我想分别单击span:before和span:after伪元素。我希望这两个元素都具有不同的警报。

我在jQuery中使用after()和before()。它正在运行，但问题在于它们也都单击对方。如果我在"before" click函数中编写before()，我会回到前端并单击元素之后，我也会在元素后看到"before"警报。我需要限制这一点。 before()仅适用于before元素，after()仅适用于after元素。

我希望两个伪元素都可以不同地工作。

<input type="text" name="" id="time" />
<div class="time-hidden-element hide">
  <span id="hour"><input type="text" placeholder="11"></span>
  <span><input type="text" placeholder="25"></span>
  <span><input type="text" placeholder="AM"></span>
</div>

jQuery(function() {
  jQuery("#time").click(function() {
    jQuery(".time-hidden-element").css('display', 'block');
  });

  return;

  jQuery('#hour').after().click(function() {
    alert("Yes");
  });

  jQuery('#hour').before().click(function() {
    alert("before")
  });
});

.time-hidden-element {
  background: rgb(172, 167, 167);
  width: fit-content;
  display: block;
  padding: 25px 46px;
}

.time-hidden-element span input {
  width: 20px
}

.time-hidden-element span {
  position: relative;
}

.time-hidden-element span:before {
  content: "";
  border-style: solid;
  border-width: 11px 33px 7px 3px;
  border-width: 13px 9px 15px 8px;
  border-color: #dc191900 #eb0b0b05 #e41616f5 #e8131305;
  position: absolute;
  top: -32px;
  left: 4px;
}

.time-hidden-element span:after {
  content: "";
  border-style: solid;
  border-width: 11px 33px 7px 3px;
  border-width: 13px 9px 15px 8px;
  border-color: #3d19dcec #eb0b0b05 #38e41600 #e8131305;
  position: absolute;
  top: 25px;
  left: 4px;
}