CSS：content：“\00a0”

问题描述

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

Today I came across a new CSS syntax that I have never seen before

content:"\00a0";

检查，它解释了：

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

The content property is used with the :before and :after pseudo-elements, to insert generated content.

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

My question is, can you point out to me in real world example, how do we use this content property? And what does the \00a0 mean in this case?

推荐答案

我已经使用它在浮动列表上实现样式文本。

I've used it before to implement styling text on a floated list

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

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

   #horz-list li:last-child:after {
    content: "";
  }
</style>

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

首先会产生

item-second item - third item

first item - second item - third item

这会保持我的标记语义&我可以通过css引入样式这样的破折号。

This keeps my markup semantic & I can introduce styling such a the dash via css.

这篇关于CSS：content：“\00a0”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！