html - 使用纯 CSS 在 div 的末尾添加一个 X？

Question

我想知道如何在 <span> 的右侧添加一个小 X .我浏览了一些现有的解决方案，但找不到一个干净(而且相当简单)的解决方案。

这是我要实现的目标的模型:

这是我目前所拥有的:

.categoryTag {
   display:inline-block;
   background-color:#eaeaea;
   border-radius:4px;
   padding:6px;
   font-size:12px;
   cursor:pointer;
   margin:4px;
}

<span class="categoryTag">category 1</span>
<span class="categoryTag">category 2</span>
<span class="categoryTag">category 3</span>

注意 content: 'X'将匹配与 span 相同的字体，而我需要不同的颜色和字体大小。

欢迎提出任何建议。

Answer 1

你可以使用伪元素:

.categoryTag {
   display:inline-block;
   background-color:#eaeaea;
   border-radius:4px;
   position: relative;
   padding:6px;
   padding-right: 25px;
   font-size:12px;
   cursor:pointer;
   margin:4px;
}

.categoryTag.medium {
  padding-right: 35px;
  font-size: 20px;
}

.categoryTag.large {
  padding-right: 45px;
  font-size: 25px;
}

.categoryTag::after {
   content: 'X';
   position: absolute;
   top: 50%;
   right: 10px;
   transform: translateY(-50%);
}

<span class="categoryTag">category 1</span>
<span class="categoryTag medium">category 2</span>
<span class="categoryTag large">category 3</span>