CSS 选择器和 content 属性在两个 inline-block 元素之间添加一个空格字符

Question

我有一系列 tag 类的 span 元素（来自 bootstrap v4），它们彼此相邻，它们之间没有任何空格，因为它们来自 JSX 元素的 reacj.js 数组：

<span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><!-- ... -->

这是来自引导程序的 CSS：

.tag {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

这些元素可以在一个表格单元格中包含多行。我可以用一些 javascript (https://stackoverflow.com/a/23619085/3446439) 在中间添加一个空格字符，或者添加一个带有空格字符的包装元素（在 JSX 中只有一个根元素）。这两个选项都不能让我满意，我认为在 CSS 中应该很简单。

我尝试了以下方法，如果它有效，那将是理想的，但它不适用于内联块元素 (https://jsfiddle.net/qjbgzzLr/)：

span.tag + span.tag::before {
    content: " ";
}

目前，我在span.tag + span.tag 上添加了margin-left，但这并不理想，因为每行中的第一个元素在其左侧都有一个边距。

有没有办法通过 CSS only 实现这一点？

Answer 1

任何伪元素都将在 span 标签内，因此不会在标签之间创建水平空间。保证金是您唯一可用的解决方案。

我建议只为每个标签添加边距-right。

span.tag {
  margin-right: .25em;
}

span.tag {
  margin-right: .25em;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet" />

<span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span
class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span
  class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span class="tag tag-primary">text</span><span
    class="tag tag-primary">text</span>

要从最终标签中删除边距，您可以使用

span:last-of-type {
margin-right:0;
}