CSS:内容:"\ 00a0"

Question

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

content:"\00a0";

在w3schools上检查它,它解释说:

定义和用法

content属性与:before和:after伪元素一起使用,以插入生成的内容.

我的问题是,你能在现实世界的例子中向我指出,我们如何使用这个content属性？\00a0这种情况下的意思是什么？

Answer 1

该content属性用于添加内容甚至添加html实体.至于\00a0,它是非破坏空间的十六进制代码.

资源:

更多信息
Javascript,CSS和(X)HTML实体的数字顺序

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引入样式这样的破折号.