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

すべてのブラウザを満足させるための最善の解決策は、background-image（この小さな矢印はそれほど大きな画像にはなりません）とbackground-position：右中央（またはそれくらい）を使用することです。このソリューションでも効果をホバリングすることができます。パディングエリアにも背景画像を配置できるので、オーバーフローが発生しません。

これがお役に立てば幸いです。

于 2013-02-13T01:56:19.337 に答える