css 使用:after创建的伪元素没有跟在正确的元素后面

oxf4rvwz  于 2022-11-19  发布在  其他
关注(0)|答案(4)|浏览(269)

我有下面的结构,当标签是必需的时候,标签旁边有一个星星。我遇到的问题是,如果标签里面有图标和工具提示,它就在标签和星号之间。有什么可能的解决方案总是在标签后面有一个开始?
第一个

shstlldc

shstlldc1#

如果span元素中有一个图标,请将 * 放在直接子span的伪元素之前。它将出现在该span的内容之前。
如果标签没有span内容,请将 * 放在标签的after伪元素上。
这可以使用CSS:has伪类来实现。
第一个
如果你必须支持没有:has实现的浏览器,那么这个方法会产生同样的效果,除了元素后面有一个字符宽度。
它所做的是用一个白色的小矩形(或任何背景颜色)覆盖标签末尾的 *,这样就看不到它了。
第一次

vx6bjr1n

vx6bjr1n2#

正如Rene在他的评论中所描述的,你必须把目标文本放在一个跨度和样式中,见下面的例子。
第一个

pexxcrt2

pexxcrt23#

这里有一个简单的解决方案,将您的<label>文本 Package 在一个<span>中,并将星星附加到该span:
第一个

pgx2nnw8

pgx2nnw84#

您可以添加另一个范围以专门包含星星,例如:

<label for="input-required" class="required">
  Label
  <span class="star">*</span>
  <span class="tooltip">
    <i class="icon icon-info"></i>
      <span class="message top">Message</span>
    </span>
</label>

并根据标注是否具有必需的类来更改新范围的显示样式

.star {
  display: none;
}

.required > .star {
  display:inline;
}

相关问题