我有下面的结构,当标签是必需的时候,标签旁边有一个星星。我遇到的问题是,如果标签里面有图标和工具提示,它就在标签和星号之间。有什么可能的解决方案总是在标签后面有一个开始?第一个
shstlldc1#
如果span元素中有一个图标,请将 * 放在直接子span的伪元素之前。它将出现在该span的内容之前。如果标签没有span内容,请将 * 放在标签的after伪元素上。这可以使用CSS:has伪类来实现。第一个如果你必须支持没有:has实现的浏览器,那么这个方法会产生同样的效果,除了元素后面有一个字符宽度。它所做的是用一个白色的小矩形(或任何背景颜色)覆盖标签末尾的 *,这样就看不到它了。第一次
vx6bjr1n2#
正如Rene在他的评论中所描述的,你必须把目标文本放在一个跨度和样式中,见下面的例子。第一个
pexxcrt23#
这里有一个简单的解决方案,将您的<label>文本 Package 在一个<span>中,并将星星附加到该span:第一个
<label>
<span>
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; }
4条答案
按热度按时间shstlldc1#
如果span元素中有一个图标,请将 * 放在直接子span的伪元素之前。它将出现在该span的内容之前。
如果标签没有span内容,请将 * 放在标签的after伪元素上。
这可以使用CSS:has伪类来实现。
第一个
如果你必须支持没有:has实现的浏览器,那么这个方法会产生同样的效果,除了元素后面有一个字符宽度。
它所做的是用一个白色的小矩形(或任何背景颜色)覆盖标签末尾的 *,这样就看不到它了。
第一次
vx6bjr1n2#
正如Rene在他的评论中所描述的,你必须把目标文本放在一个跨度和样式中,见下面的例子。
第一个
pexxcrt23#
这里有一个简单的解决方案,将您的
<label>
文本 Package 在一个<span>
中,并将星星附加到该span:第一个
pgx2nnw84#
您可以添加另一个范围以专门包含星星,例如:
并根据标注是否具有必需的类来更改新范围的显示样式