CSS - Línea vertical en menú horizontal

Hola a todos.
Soy nuevo en esto del CSS y quizás esto os suene a tontería pero no caigo como hacerlo.
Estoy haciendo un diseño horixontal del tipo:

Cerrar sesión | Ayuda | Centro de seguridad

He creado el menú co un <ul> y <li>, con display:inline y list-style-type:none con sus respectivos padding.
Todo perfecto. Lo que no sé es cómo integrar y dónde la barra vertical. Lo he mirado en difrentes páginas y la barra no es selecionable con el cursor, así que supongo que está hecha con CSS.
He conseguido algo parecido dándole un border-right a la <li> pero me parece un poco chapucero y la barra sí que se puede seleccionar con el cursor, por lo que deduzco que se hace de otra manera.

Por ejemplo aquí:
http://www.sport.es/es/
Las barras que separan PORTADA BARÇA MADRID ESPAÑOL

¿Alguien me puede indicar como hacerlo?
Gracias de antemano.

Hola Martin, esa barra a la que haces referencia, es el borde del <li>... en la pagina sport.es es:

Todos los menus que han necesitado de esa separación, los hemos realizado siempre de este modo.

Gracias xve.
Lo había hecho así dándole al padding de la izquierda y de la derecha el mismo valor para que la línea quedase centrada.
Para que no apareciese la última línea detrás de la última <li>, creé la siguiente regla:



Supongo que es lo correcto.
Pensaba que había otra manera de hacerlo porque no veía el código muy limpio.

Gracias por la respuesta.

De la manera que has utilizado, siempre tendrás que acordarte de modificar ese estilo cuando añadas o elimines opciones del menu. La manera correcta a mi modo de ver seria:


De esta manera, el ultimo nunca tendrá el borde, sean cuantas sean las opciones de menú.

Mucho mejor.
Solo conocía el first-child de los pseudoelementos.

Gracias de nuevo xve.