How to vertically (middle position) align pseudo-element 'before' for LI element

Question

I want to vertically align pseudo-element li:before, without using margin, I've tried to include vertical-align: middle; in the ul.nav-menu-list li:hover:before, .nav-menu-list li:focus:before, but it's not working.

Bellow is my code or JSFiddle here:

.nav-menu-list>li>a {
    font-family: 'Pribambas', Helvetica, Roboto, Arial, sans-serif;
    font-size: 24px;
    font-weight: normal;
    line-height: normal;
}

ul.nav-menu-list li a {
    border-bottom: none;
    padding-left: 60px;
    color: #fff;
}

ul.nav-menu-list li:hover:before, .nav-menu-list li:focus:before {
    content: '-';
    display: block;
    width: 15px;
    height: 3px;
    background-color: #fff;
    clear: both;
    vertical-align: middle;
}

ul.nav-menu-list li a:hover, ul.nav-menu-list li a:focus {
    background-color: transparent;
    color: #a2a2a2;
}

Of course it is not working, because `vertical-align` doesn’t apply to `block` elements. — CBroe, Feb 15 '15 at 12:44
This seems to be the best answer for vertically centering content of :before/:after pseudo-elements: https://stackoverflow.com/a/14524161/470749 — Ryan, Dec 04 '19 at 16:16

score 2 · Answer 1 · answered Feb 15 '15 at 16:46

2

I would use

 .nav-menu-list>li {
     position: relative;
 }
 ul.nav-menu-list li:hover:before, .nav-menu-list li:focus:before {
     position: absolute;
     top: 50%;
     margin-top: -3px;
 }

to achieve vertical align

answered Feb 15 '15 at 16:46

Jackson

3,476
1
19
29

Michelangelo · Accepted Answer · 2015-02-15T19:45:23.267

1

Edit I just see that you don't want to use margin. Well I tried :)

This will work as you want it to work, just set display to inline-block and give it a margin-bottom of 6px: http://jsfiddle.net/bayxxey3/8/

ul.nav-menu-list li:hover:before, .nav-menu-list li:focus:before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 3px;
    background-color: #000;
    clear: both;
    margin-bottom:6px;
}

edited Feb 15 '15 at 19:45

answered Feb 15 '15 at 11:45

Michelangelo

5,888
5
31
50

I am sorry, but I had a little bit wrong the CSS, the `content '';` has to be a block like here [link](http://jsfiddle.net/bayxxey3/5/), but line-height isn't working – Valerxx22 Feb 15 '15 at 16:38
another way is to use `background-image` instead of `content` [link](http://jsfiddle.net/bayxxey3/7/) , for class `ul.nav-menu-list li:hover, .nav-menu-list li:focus` but I would not prefer this way, but I'm struggling to make it work, lol – Valerxx22 Feb 15 '15 at 16:48
@ValeriCrudu I have made a new fiddle. If you don't want to have any content you have to treat the `before` as an element. – Michelangelo Feb 15 '15 at 19:41

score 1 · Answer 3 · answered Feb 15 '15 at 21:35

1

set vertical-align: middle; on the a as well, and change the :before to display:inline-block. Now you have two "elements" both inline-block and middle aligned.

vertical-align needs elements working together to create an align. Block doesn't play along.

answered Feb 15 '15 at 21:35

Laurens Kling

2,221
1
21
31

Mario Boss · Answer 4 · 2020-03-18T11:19:59.490

There is one more solution for this kind of need with using an absolute top position set to 50% and negative translateY value set to -50%. Parent element must have a relative position. Explanation here.

Please see the modified CSS code from the question and please notice that you don't need clear: both or line-height: 28px

ul {
    list-style-type: none;
}

.nav-menu-list>li>a {
    font-family: 'Pribambas', Helvetica, Roboto, Arial, sans-serif;
    font-size: 24px;
    font-weight: normal;
    line-height: normal;
}

ul.nav-menu-list li a {
    border-bottom: none;
    padding-left: 60px;
    color: #000;
}

ul.nav-menu-list li {
    position: relative;  
}

ul.nav-menu-list li:hover:before, .nav-menu-list li:focus:before {
    content: '';
    display: block;
    width: 15px;
    height: 3px;
    background-color: #000;
    /* clear: both; */
    /* line-height: 28px; */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

ul.nav-menu-list li a:hover, ul.nav-menu-list li a:focus {
    background-color: transparent;
    color: #a2a2a2;
}

      <ul class="nav-menu-list">
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
        <li><a href="#">Link4</a></li>
      </ul>

How to vertically (middle position) align pseudo-element 'before' for LI element

4 Answers4