html - 如何将伪元素定位得更高

Question

非常简单的问题:我有一个伪元素(右向箭头)，我希望它的位置比现在高。我试过更改 line-height，但这会更改元素本身的高度。

我的问题的基本概述:

CSS:

ol
{
    list-style-type: none;
}

ol > li
{
    display: inline;
}

ol > li + li:before 
{
    font-size: 8px;
    content: "➤"; 
    /* Want this to be positioned higher, so that it's right between the vertical height of the list items rather than floated near the 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>

还有一把 fiddle :http://jsfiddle.net/hxb5gy5j/

Answer 1

将 vertical-align: middle; 和 line-height: 0px; 添加到 li:before 中，如下所示:

DEMO

ol {
    list-style-type: none;
}
ol > li {
    display: inline;
}
ol > li + li:before {
    font-size: 8px;
    content:"➤";
    vertical-align: middle;
    line-height: 0px;
}

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