2

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

要求是在 IE8 及更高版本中工作。

标记：

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

4

2 回答 2

5

干得好：

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

出乎意料的简单：D

于 2013-02-13T02:13:22.357 回答
0

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.

于 2013-02-13T01:56:19.337 回答