Why Will :after Be Drawed Strangely?

Here is my code: .specific_tag_cases a:after{ position: absolute; font-family: Arial; background-color: #c1c1c1; color: white; content: '×'; padding: 0px 3

Solution 1:

Please define height and width for a tag.

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.

like below

.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*/
}

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>