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:
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
Comments
Post a Comment