如何将伪元素放置在更高的位置

Question

Very simple question: I have a pseudo element (right-pointing arrows) that I would like position higher than they currently are. I've tried changing the line-height , but that changes the height of the element itself.

A basic outline of my problem:

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>

And a fiddle: http://jsfiddle.net/hxb5gy5j/

Answer 1

Add vertical-align: middle; and line-height: 0px; to li:before like this:

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

One quick solution is to use position: relative and 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

If you want a higher degree of control over where you can place your bullet, you can use absolute positioning:

1. Set ol > li + li:before to position:absolute .
2. Set its parent, ol > li to position:relative .
3. You'll also need to add some padding to ol > li to clear the 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 */
}

As you can see, this requires a little bit more setup, specifically adding extra padding to the parent <li> element to clear space for the bullet. But it also gives you a lot more control and the ability to do something more customized. It depends on what you're trying to achieve.

Fiddle: http://jsfiddle.net/Lecxg3mp/1/