CSS 选择器和内容属性在两个内联 block 元素之间添加一个空格字符

Question

我有一系列 tag 类的 span 元素(来自 bootstrap v4)，它们彼此相邻，没有任何空间，因为它们来自 reacj。 JSX 元素的 js 数组:

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

这是来自 bootstrap 的 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 来做应该很简单。

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

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

目前，我在 span.tag + span.tag 上放置了一个 margin-left 但这是不理想，因为第一个元素每行的左边都有一个边距。

有没有办法通过仅使用 CSS 来实现这一点？

Answer 1

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

我建议只为每个标签添加 margin-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;
}