Как запретить CSS отображать содержимое :: after в новой строке?

Question

Я пытаюсь отобразить список имен, разделенных запятой, используя CSS:

a:after {
  content: ', \00a0';
  display: inline-block;
  text-decoration: none;
}

<a href="foo.com">Foo</a>
<a href="bar.com">Bar</a>

Проблема в том, что результат выглядит примерно так:

Foo, Baz
, Bar

Answer 1

Вам необходимо добавить white-space: nowrap; к элементу a в css, чтобы в следующей строке не отображалась запятая.

a {
 white-space: nowrap;
}

a:after {
  content: ', \00a0';
  display: inline-block;
  text-decoration: none;
}

<a href="foo.com">Foo</a>
<a href="bar.com">Bar</a>
<a href="foo.com">Foo</a>
<a href="bar.com">Bar</a>
<a href="foo.com">Foo</a>
<a href="bar.com">Bar</a>
<a href="foo.com">Foo</a>
<a href="bar.com">Bar</a>
<a href="foo.com">Foo</a>
<a href="bar.com">Bar</a>
<a href="foo.com">Foo</a>
<a href="bar.com">Bar</a>
<a href="foo.com">Foo</a>
<a href="bar.com">Bar</a>
<a href="foo.com">Foo</a>
<a href="bar.com">Bar</a>
<a href="foo.com">Foo</a>
<a href="bar.com">Bar</a>
<a href="foo.com">Foo</a>
<a href="bar.com">Bar</a>

Answer 2

Вам нужно только добавить несколько css свойств к вам a: after и как показано ниже:

a{
  margin-right: 5px;
  text-decoration: underline
}
a:after {
    content: ',';
    display: inline-block;
}

Answer 3

Добавьте эти свойства в селектор:

display: block;
float: left;

Answer 4

Это то, что вы ищете, я думаю:

HTML:

<a href="foo.com">Foo</a>
<a href="bar.com">Bar</a>

CSS:

a:after {
content: ', \00a0';
display: inline-block;
}

a {
 text-decoration: none;
}

Текстовое оформление должно быть отдано не a :: после