CSS unordered list in one line

Format a simple unordered list <ul></ul> of elements, like this …

• Hello
• List Element
• Wrapped
• As A Single Line
• Example

… to an one liner with some content before and after the joined elements

• Hello
• List Element
• Wrapped
• As A Single Line
• Example

This is the css, which will place an arrow before and brackets after each element. The first and the last list element will be extra handled.

<style>
ul.one-line-list:before { display: inline; }
ul.one-line-list { display: block; }
ul.one-line-list li {
  display: inline; 
  cursor: default;
  width: 100%;
  font-size: 2em;
}
ul.one-line-list li:first-child a:before { content: '$obj➔'; }
ul.one-line-list li:last-child a:after { content: "();"; }
ul.one-line-list li a:before { content: "➔"; color: silver; }
ul.one-line-list li a:after { content: "()"; color: silver; }
ul.one-line-list li a { text-transform: lowercase; }
ul.one-line-list a { color: red; text-decoration: none; }
</style>

In the html you need just the css class on the ul-element.

<ul class="one-line-list">
  <li><a href="/h">Hello</a></li>
  <li><a href="/l">List Element</a></li>
  <li><a href="/w">Wrapped</a></li>
  <li><a href="/a">As A Single Line</a></li>
  <li><a href="/e">Example</a></li>
</ul>