1

I'm trying to display a list of names, separated by a comma, using CSS:

a:after {
  content: ', \00a0';
  display: inline-block;
  text-decoration: none;
}
<a href="foo.com">Foo</a>
<a href="bar.com">Bar</a>

The problem is that the result looks something like this:

Foo, Baz
, Bar
kesoper
  • 35
  • 4
  • I'm not sure I got the question, do you need to remove `:after` on last `a` element? Also, comma and space do not look underlined. – GrafiCode Feb 19 '20 at 09:59
  • If you look at my edit on your question (maybe accept it) you will see there actually is no underline decoration on your `:after` portion. I don't understand why you keep rejecting the edit... – GrafiCode Feb 19 '20 at 10:05
  • The underline decoration is only there when I use ```inline```, not ```inline block```. I only added that to explain why I don't use ```inline```. – kesoper Feb 19 '20 at 10:06
  • It works with inline-block too. If you just could accept my edit, you will see it by yourself. – GrafiCode Feb 19 '20 at 10:08
  • Does this answer your question? [prevent :after element from wrapping to next line](https://stackoverflow.com/questions/16100956/prevent-after-element-from-wrapping-to-next-line) – Peter B Feb 19 '20 at 10:15

4 Answers4

1

You need to add white-space: nowrap; to your a element into the css in order to prevent the comma displaying alone in the next line.

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>
mahpgnaohhnim
  • 63
  • 1
  • 8
0

This is what you are looking for, I guess:

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;
}

Text decoration has to be given to a not to a::after

AKNair
  • 1,369
  • 1
  • 12
  • 24
  • But I want the root to be underlined, just not the comma and the whitespace. – kesoper Feb 19 '20 at 10:03
  • You mean the "text" with underline but the "comma and space" without underline. Am I getting it correct? – AKNair Feb 19 '20 at 10:05
  • Yes. But that's not really the problem, I've already achieved that with using ```inline-block```. I just tried to explain that since this doesn't work with ```inline``` I need to use ```inline-block```. – kesoper Feb 19 '20 at 10:10
  • When I see the entire communication and the title of this problem, there is a confusion. In short, Is it like why the same thing can not be achieved by "display: inline"? – AKNair Feb 19 '20 at 10:16
0

You only need to add some css properties to you a:after and a like shown bellow :

a{
  margin-right: 5px;
  text-decoration: underline
}
a:after {
    content: ',';
    display: inline-block;
}
L-HAZAM
  • 84
  • 9
0

Add these properties to the a selector:

display: block;
float: left;
kesoper
  • 35
  • 4