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>

小提琴：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>

Answer 2

一个快速解决方案是使用position: relative和top: -2px：

ol {
    list-style-type: none;
}
ol > li {
    display: inline;
}
ol > li + li:before {
    font-size: 8px;
    content:"➤";
    position: relative;
    top: -2px;
}

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

Answer 3

如果您想要更高程度地控制放置子弹的位置，可以使用绝对定位：

将ol > li + li:before设为position:absolute。
将其父级ol > li设置为position:relative。
您还需要在ol > li添加一些填充以清除 bullet：padding-left:10px;：

HTML：

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

CSS：

ol
{
    list-style-type: none;
}

ol > li
{
    display: inline;
    position:relative; /* add relative positioning to parent */
    padding-left:10px; /* add padding to clear space for bullet */
}

ol > li + li:before 
{
    font-size: 8px;
    content: "➤"; 
    position:absolute; /* absolutely position pseudo element */
    top:.5em; /* you now have lots of control over exact position of bullet */
    left:0;
    /* 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 */
}

如您所见，这需要更多设置，特别是向父<li>元素添加额外填充以清除子弹的空间。但它也为您提供了更多的控制和更多定制的能力。这取决于你想要实现的目标。

小提琴： http://jsfiddle.net/Lecxg3mp/1/

如何将伪元素定位得更高

3 个答案:

DEMO