gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 19:39:29 24 4
gpt4 key购买 nike

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

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

enter image description here

这是我目前所拥有的:

.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 相同的字体,而我需要不同的颜色和字体大小。

欢迎提出任何建议。

最佳答案

你可以使用伪元素:

.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>

关于html - 使用纯 CSS 在 div 的末尾添加一个 X?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47286332/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com