在CSS中遇到<hr />问题

Question

当我使用此代码时，它会像我希望的那样显示圆点。但这仅在Chrome中发生，当我在野生动物园中查看网站时，它是方形的。有什么方法可以使其在Safari和Chrome上显示相同？

我在chrome中尝试过，效果很好，但在野生动物园中却是正方形。

hr {
  border-style: none;
  border-top-style: dotted;
  border-color:green;
  border-width: 10px;
  width:30%;
}

<hr>

Answer 1

Try this:

hr {
border-top: 10px dotted green; 
width: 30%;
height: 0.01px;
border-top-style: dotted;
border-left: none;
border-right: none;
border-bottom: none;
color: green;
display: block;
border-color: green;
}

<hr>

Answer 2

您可以使用Pseudo：后元素在文本后设置虚线。以下是示例。

div {
  display: flex;
  width: 300px;
}

div:after {
  border-bottom: 1px dotted black;
  content: '';
  flex: 1;
}