Question

我创建了一个列表样式导航，每个超链接可以是多行，在每个超链接元素之后我添加了一个伪元素'箭头'之后，是否可以垂直对齐伪元素而不管超链接高度？ / p>

要求在IE8＆amp;上方。

加价：

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

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

目前的原型： http://jsfiddle.net/yVJbL/

Answer 1

你走了：

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

令人惊讶的简单：D

Answer 2

让所有浏览器都满意的最佳解决方案是使用背景图像（这个小箭头不会是如此大的图像）和背景位置：右中心（左右）。您也可以使用此解决方案悬停效果。背景图像也可以放在填充区域，因此不会出现任何溢出。

希望这会对你有所帮助。

列表导航中的垂直对齐伪元素

2 个答案: