vertical align pseudo element in list navigation

问题

I've created a list style navigation and each hyperlink can be multiple lines, after each hyperlink element I added a pseudo element 'arrow' after, would it be possible to align the pseudo element vertically regardless of the hyperlink height?

The requirement would be for this to work in IE8 & above.

The Mark-up:

<ul>
<li>
   <a href="#">
      <h3 class="title">Cover</h3>
      <p class="subtitle">Lorem ipsum dolor sit</p>
    </a>
</li>
<li class="current">
   <a href="#">
      <h3 class="title">Lorem ipsum dolor sit amet</h3>
      <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores cum!</p>
   </a>
</li>
<li>
   <a href="#">
      <h3 class="title">Lorem ipsum dolor sit amet, consectetur</h3>
      <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis.</p>
   </a>
</li>
<li>
   <a href="#">
      <h3 class="title">Lorem ipsum dolor sit amet, consectetur adipisicing Lorem ipsum dolor sit.</h3>
   </a>
</li>
</ul>

The CSS:

body {
    background: #666;
    padding: 5em;
}
ul {
    background: #fff;

    list-style: none;
}
li {
    border-bottom: 1px solid #ccc;
    position relative;
}
.current a {
    border-color: #000;
}
a {
    border-left: 8px solid #ccc;
    overflow: hidden;
    display: block;
    line-height: 1.3;
    padding: .75em;
    position: relative;
    text-decoration: none;
    color: #000;
}
a:after {
    content: '>';
    color: #ce4300;
    float: right;
    font-size: 1.125em;
    line-height: 1;
    position: absolute;
    right: 1em;
}
h3 {
    float: left;
    font-size: .875em;
    margin: 0 1em 0 0;
}
.subtitle {
    color: #555;
    clear: left;
    float: left;
    font-size: .875em;
    font-style: itatlic;
}

The current prototype: http://jsfiddle.net/yVJbL/

回答1:

Here you go:

a:after {
    content:'>';
    color: #ce4300;
    font-size: 1.125em;
    position: absolute;
    line-height: 0;
    right: 1em;
    top: 50%;
    bottom: 50%;
}

Surprisingly simple :D

回答2:

I thing best solution to make all browsers happy is to use a background-image (this little arrow won't be so big image) and background-position: right center (or so). You are open to hover efect with this solution as well. Background image can be placed also in padding area so there won`t be any overflow.

Hope this helps you.

来源：https://stackoverflow.com/questions/14844711/vertical-align-pseudo-element-in-list-navigation

标签

css

alignment

vertical-alignment

pseudo-element

text-alignment