javascript - 为什么:after被奇怪地画出来？

这是我的代码：

.specific_tag_cases a:after{
    position: absolute;
    font-family: Arial;
    background-color: #c1c1c1;
    color: white;
    content: "×";
    padding: 0px 3px;
    margin-top: 6px;
    margin-right: 4px;
    font-size: 11px;
    border-radius: 50%;
}

这是输出：



好的，一切都很好。



但是有时候页面重新加载后突然看起来像这样：



其背后没有任何特定的逻辑。我的意思是我不知道什么时候会奇怪地绘制它。任何时候都可能发生。

为什么？我该如何解决该问题？

最佳答案

请为height标签定义width和a。

您正在使用border-radius:50%;，但没有分配width和height，如果需要四舍五入的框，则必须分配相等的width和height。

像下面

.specific_tag_cases a:after{
    position: absolute;
    font-family: Arial;
    background-color: #c1c1c1;
    color: white;
    content: "×";
    padding: 0px 3px;
    margin-top: 6px;
    margin-right: 4px;
    font-size: 11px;
    border-radius: 50%;
    width:8px;  /*Add this*/
    height:8px; /*Add this*/
}

包括工作示例。在此示例中，我删除了position并更改了margin属性，因为我不需要它。

a {
  background: tomato;
  padding: 10px;
  color: #fff;
  text-decoration: none;
}

a:after {
  font-family: Arial;
  background-color: #c1c1c1;
  color: white;
  content: "×";
  padding: 0px 3px;
  margin-top: 6px;
  margin-left: 5px; /*I changed margin-right to left*/
  font-size: 11px;
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

<a href="#">Home</a>