user6950100 user6950100 - 1 year ago 97
HTML Question

displaying list inline as text within an MVC

I have a list of items in ViewModel. For every item in the list, display as a list. Eg.

@foreach (var item in Model.Items)
<li><a href="link">@Html.DisplayFor(m => item.DisplayName)</a>

Which is displayed as:

  • Item 1

  • item 2

  • Item 3

  • Item 4

But how do I display it so that it has an "and" before the last item, and a comma after each one. Like this:

Item 1, Item 2, Item 3 and Item 4.

Answer Source

You can use pure CSS solution to do that

ul.cs-list li {
  list-style: none;
  display: inline-block;

ul.cs-list li::after {
  content: ',';

ul.cs-list li:last-child::after {
  content: '.';

ul.cs-list li:nth-last-child(2)::after {
  content: 'and';
  margin-left: 2px;
<ul class="cs-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download