为什么:之后被奇怪地画出来? [英] Why will :after be drawed strangely?

问题描述

这是我的代码:

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

这是输出:

好的，一切都很好.

但是有时页面重新加载后突然出现如下情况:

But sometimes suddenly it appears like this after page reloading:

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

There isn't any specific logic in the behind of it. I mean I don't know when exactly it will be drawed strangely. Anytime it can occur.

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

Why? How can I fix the problem?

推荐答案

请为a标签定义height和width.

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

You are using border-radius:50%; but you don't assign a width and height, And if you need a rounded box you have to assign equal width and 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属性，因为我不需要它.

Working example included. In this example i removed position and change margin property, because i don't need it.

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>

这篇关于为什么:之后被奇怪地画出来?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！