为什么会：奇怪的画出来之后？

这是我的代码：

.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

请为标签定义height和width 。

您正在使用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; } 

 Home