псевдоэлемент вертикального выравнивания в навигации по списку

Я создал навигацию в стиле списка, и каждая гиперссылка может состоять из нескольких строк, после каждого элемента гиперссылки я добавил псевдоэлемент «стрелка», можно ли выровнять псевдоэлемент по вертикали независимо от высоты гиперссылки?

Требуется, чтобы это работало в 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/


vertical-alignment alignment css text-alignment pseudo-element
person calebo    schedule 13.02.2013    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Ну вот:

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

Удивительно просто :D

person James Coyle    schedule 13.02.2013
comment
Я знаю IE8 с этим решением... Другие могут работать, верно. - person tomis; 13.02.2013
comment
Думаю, работает во всех браузерах, кроме ранних версий IE. Проверено в новейших версиях всех браузеров, вроде работает без проблем. - person James Coyle; 13.02.2013
comment
чем это нормально, запомните это :-) Все учатся, знаете ли. Поднято от меня. - person tomis; 13.02.2013
comment
Я понятия не имел, что ты можешь это сделать, пока немного не поиграл на твоей скрипке. :D Действительно просто. Обязательно буду иметь это в виду. - person James Coyle; 13.02.2013
comment
Да... установка высоты строки на 0 - это то, чего я никогда не пробовал. Каждый раз я использовал такие атрибуты, как: высота: 20 пикселей; верхнее поле: -10px; верх: 50%; - но вы знаете, отрицательная маржа - это действительно непонятное решение :-) - person tomis; 13.02.2013
comment
Я добавил рамку с закругленными углами для ::after для списка a .. но вертикально не по центру .. ul.mtree ul li li a::after { border: 1px solid #fff; радиус границы: 50%; содержание: ; высота: 30 пикселей; положение: абсолютное; справа: 20 пикселей; топ: 16%; ширина: 30 пикселей; } - person nikesh; 04.08.2015

arrow_upward
0
arrow_downward

Я думаю, что лучшее решение, чтобы сделать все браузеры счастливыми, - это использовать фоновое изображение (эта маленькая стрелка не будет таким большим изображением) и фоновое положение: справа по центру (или около того). Вы также открыты для эффекта наведения с этим решением. Фоновое изображение также можно разместить в области отступов, чтобы не было переполнения.

Надеюсь, это поможет вам.

person tomis    schedule 13.02.2013
comment
Спасибо за ваш вклад, но я бы предпочел решение без изображения, потому что цвет/размер стрелки будет меняться в зависимости от контекста. plus также будет хорошо работать в разрешении сетчатки. - person calebo; 13.02.2013
comment
Ах, конечно... Изменение цвета не должно быть проблемой, разрешение не уверен. display:table может исправить это, однако я уверен, что он не поддерживается в IE7, и я не уверен в поддержке в IE8. Если display: table, вы можете настроить вертикальное выравнивание. Последнее, довольно непрямое решение может заключаться в использовании небольшой поддержки JS (понимая, что это не очень хорошее решение). Постараюсь подумать об этом подробнее, может быть, что-то выясню. - person tomis; 13.02.2013