html - How to position a pseudo element higher -

html - How to position a pseudo element higher -

very simple question: have pseudo element (right-pointing arrows) position higher are. i've tried changing line-height, changes height of element itself.

a basic outline of problem:

css:

ol { list-style-type: none; } ol > li { display: inline; } ol > li + li:before { font-size: 8px; content: "➤"; /* want positioned higher, it's right between vertical height of list items rather floated near bottom */ }

html:

<ol> <li> <a>list item 1</a> </li> <li> <a>list item 2</a> </li> <li> <a>list item 3</a> </li> </ol>

and fiddle: http://jsfiddle.net/hxb5gy5j/

add vertical-align: middle; , line-height: 0px; li:before this:

demo

class="snippet-code-css lang-css prettyprint-override">ol { list-style-type: none; } ol > li { display: inline; } ol > li + li:before { font-size: 8px; content:"➤"; vertical-align: middle; line-height: 0px; } class="snippet-code-html lang-html prettyprint-override"><ol> <li> <a>list item 1</a> </li> <li> <a>list item 2</a> </li> <li> <a>list item 3</a> </li> </ol>

html css