CODEWITHSUNDEEP
htmlcss
Valerxx22
Valerxx22

Reputation: 814

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

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;
}

Upvotes: 3

Views: 3159

Answers (4)

Mario Boss
Mario Boss

Reputation: 1995

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>

Upvotes: 0

Laurens Kling
Laurens Kling

Reputation: 2261

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.

Upvotes: 1

Michelangelo
Michelangelo

Reputation: 5958

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;
}

Upvotes: 1

Jackson
Jackson

Reputation: 3518

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

Upvotes: 2

Related Questions