javascript - 为什么会:after be drawed strangely?

Question

这是我的代码:

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

这是输出:

好的，没问题。

---

但有时在页面重新加载后突然出现这样:

背后没有任何具体的逻辑。我的意思是我不知道它到底什么时候会被奇怪地画出来。任何时候都可能发生。

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

Answer 1

请为 a 标签定义 height 和 width。

您正在使用 border-radius:50%; 但您没有分配 width 和 height，如果您需要圆 Angular 框你必须分配相等的 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>