CSS: content:"\00a0"

Question

今天我遇到了一个以前从未见过的CSS语法。

content:"\00a0";

在w3schools上查阅，它解释说：

定义和用法

content 属性与 :before 和 :after 伪元素一起使用，用于插入生成的内容。

我的问题是，你能给我举一个真实世界的例子吗，说明我们如何使用这个 content 属性？而在这种情况下，\00a0 是什么意思呢？

- SteD

---

你可以在这里找到更多的代码：http://css-tricks.com/snippets/html/glyphs/ - NoWar

NO-BREAK SPACE（https://www.fileformat.info/info/unicode/char/00a0/index.htm） - vsync

Answer 1

content 属性用于添加内容，甚至可以添加 HTML 实体。而 \00a0 是一个用于表示不换行空格的十六进制码。

相关资源：

更多信息
JavaScript、CSS 和 (X)HTML 数字顺序实体

- Sarfraz

Answer 2

我以前用它来实现在浮动列表上进行文本样式设置。

#horz-list li {
  list-style: none;
  float: left;
}

#horz-list li:after {
  content: "\00a0-\00a0";
}

 #horz-list li:last-child:after {
  content: "";
}

<ul id="horz-list">
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

这将产生类似于

第一项 - 第二项 - 第三项

这使我的标记语言语义化，并且我可以通过css引入样式，如短划线。

- Ben Rowe