html - 使用 CSS :after and :content 出现空白

Question

我正在尝试使用 CSS 在元素之间放置逗号来设置 wp_list_categories 的输出样式。但是，逗号前出现了一个空格，我真的无法理解它是从哪里来的!

我做了一个jsbin进行演示和比较。

截图:

HTML:

<ul id="category-listing">
    <li class="cat-item cat-item-6"><a href="#" title="View all posts filed under Branding">Branding</a>
</li>
    <li class="cat-item cat-item-4"><a href="#" title="View all posts filed under Environment">Environment</a>
</li>
    <li class="cat-item cat-item-5"><a href="#" title="View all posts filed under Exhibition">Exhibition</a>
</li>
    <li class="cat-item cat-item-8"><a href="#" title="View all posts filed under Lecture">Lecture</a>
</li>
    <li class="cat-item cat-item-9"><a href="#" title="View all posts filed under Photography">Photography</a>
</li>
    <li class="cat-item cat-item-10"><a href="#" title="View all posts filed under Print">Print</a>
</li>
</ul>

CSS:

li {
  font-size: 46px;
  display: inline;
  margin: 0;
  padding: 0;
}

#category-listing li:after {
  content: ', ';
}

Answer 1

出现空白是因为它存在于您的 HTML 代码中。

关闭</li>标签在新的一行。回车符在 HTML 中被视为空格，因此列表项元素的末尾有空格。

它出现的原因是因为您正在使用 display:inline .使用时inline (或 inline-block )，空白是相关的，因为 inline表示“将此元素视为纯文本”，因此任何空格都被视为文本的有意部分。

摆脱它的最好方法是简单地把 </li>结束标记与文本的其余部分位于同一行，因此那里没有空格。

还有许多其他方法可以解决这个问题，但其中大多数都涉及到相当 hacky 的 CSS；简单地关闭空间是迄今为止最简单的选择。

下一个最佳选择是切换到使用 float:left而不是 display:inline .这也将解决问题，但会改变整个呈现的方式，这将需要您对 CSS 进行各种其他更改以进行补偿。