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

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

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>