使用CSS伪元素插入乘号

Question

28

我正在尝试在对话框链接上使用 × × HTML 字符作为关闭图标。

.close:before {
    content: "\0274c";
    display: block;
    text-align: center;
    vertical-align: middle;
}

Firefox可以使用上面的示例，也可以使用：

content: "\274c";

Chrome不接受任何一种字体并只是显示一个缺失字符的方块。我正在使用Arial字体。为了使它跨浏览器兼容，我需要做什么？

- R Reveley

20

抱歉，无法翻译 "\d7"，因为它不是一个完整的句子或短语，也缺乏上下文。请提供更多信息以便我可以更好地帮助你。 - Alex K.

那个确实可以解决问题，但是不知道为什么比我预期的要小很多。不过我可以调整字体大小。如果你把它作为答案添加，我会将其标记为正确答案。 - R Reveley

对我来说运行良好！你使用的是哪个版本的Chrome？ - Barun

Windows 上的版本 36.0.1985.125 m - R Reveley

3个回答

1

我尝试按照Bootstrap建议使用关闭图标，并希望代码可重用，因此决定使用在CSS中配置的“x”图标。以下代码对我很有效：

.close-icon-right:after {
   content: '\00D7';
   position: absolute;
   right: 1rem;
   top: 1rem;
}

正如@BoltClock所指出的那样，“U+00D7乘号”是乘法符号，可以在CSS伪类中使用content: '\00D7'。

- Kailas

1

您可以使用其他符号：

更多选项请参见： X标记

- Barnee

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

你所使用的转义序列并不代表×符号，而是代表完全不同的符号U+274C CROSS MARK（叉号），它也恰好作为一个emoji存在。

如评论中所提到的，×的编码是U+00D7 MULTIPLICATION SIGN，这才是你要寻找的符号。字体大小的差异取决于每个字符在字体设计中的绘制方式。

如果浏览器无法渲染U+274C（或任何其他字符），可能是由于字体、浏览器甚至平台的问题。