CODEWITHSUNDEEP
htmlcss
user4162965
user4162965

Reputation:

How to position a pseudo element higher

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/

Upvotes: 0

Views: 91

Answers (3)

Dee
Dee

Reputation: 36

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/

Upvotes: 0

Anonymous
Anonymous

Reputation: 10216

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>

Upvotes: 2

Alex Char
Alex Char

Reputation: 33218

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>

Upvotes: 1

Related Questions