Niby banalny HTML…

Jest sobie HTML. Prezentujemy w nim listę elementów. Ponieważ jest to lista, na przykład lista cech, semantycznie wypada przedstawić ją jako <ul> lub <ol> (unordered/ordered list). Zarazem chcemy, by – bez zaśmiecania kodu HTML – wypisać ją po prostu jako ciągły tekst oddzielony przecinkami, np. „majonez, jajko, ananas„. Robimy to wyłącznie jako element prezentacji, nie samej treści w kodzie HTML. To też nie problem, prawda? Za pomocą CSS dodajemy przecinki za każdym elementem listy, z wyjątkiem ostatniego:

li::after {
  content: ", ";
}
li:last-child::after {
  content: "";
}

Niby wszystko działa… Lecz oto jeśli wewnątrz naszej listy umieścimy podlistę, Google Chrome płata nam figla. Jeżeli załamanie linii wypada po ostatnim elemencie podlisty, przecinek zawija się do drugiej linii, zamiast zostać w tej samej. Wygląda to paskudnie:

Co ciekawe, w Firefoksie problem nie występuje.

Jako ćwiczenie dla czytelnika pozostawiam pobawienie się tym przykładem na jsFiddle.