IE和Edge中缺少水平规则开头的CSS圆

我想在水平尺的左边画一个彩色圆圈

下面是我用来在水平尺开始处显示一个圆圈的内容。它适用于除IE11和Edge之外的所有现代浏览器。我已经尝试了我能想到的一切，并且无休止地搜索。有人能帮忙吗

.leftArticle hr:before {
  display: block;
  content: "";
  width: 12px;
  height: 12px;
  background: #4990cd;
  top: 50%;
  margin-top: -7px;
  right: -3px;
  z-index: 1;
  border-radius: 6px;
}

---

不要将伪元素与

hr

一起使用

.leftArticle{
位置：相对位置；
}
.左文：之前{
位置：绝对位置；
左：0；
最高：50%；
显示：块；
内容：“；
宽度：12px；
高度：12px；
背景：#4990cd；
利润上限：-7px；
右：-3px；
z指数：1；
边界半径：6px；
}