CSS-селектор и свойство содержимого для добавления символа пробела между двумя элементами inline-block

Question

У меня есть серия span элементы класса tag (из bootstrap v4), которые смежны друг с другом без пробела между ними, потому что они происходят из массива activj.js элементов JSX:

<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 ( /questions/16572019/otobrazhenie-spiska-ssyilok-cherez-zapyatuyu/16572027#16572027) или добавить элемент обертки (чтобы в JSX был только один корневой элемент) с пробелом. Оба эти варианта меня не устраивают, и я подумал, что это должно быть просто сделать в CSS.

Я попробовал следующее, что было бы идеально, если бы это работало, но не с элементами inline-block ( https://jsfiddle.net/qjbgzzLr/):

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

Сейчас я положил margin-left на span.tag + span.tag но это не идеально, так как первый элемент в каждой строке имеет поле слева.

Есть ли способ достичь этого только с помощью CSS?

Answer 1

Любой псевдоэлемент будет находиться внутри тега span и не будет создавать горизонтальное пространство между тегами. Маржа - единственное доступное вам решение.

Я бы предложил просто добавить 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;
}