Vertical Align Якорь с: После

У меня есть простой якорь следующим образом:Vertical Align Якорь с: После

<a href="#">News</a>

Я хотел бы добавить знак «+» на праве, так я использовал «: после».

ONLINE Пример: http://codepen.io/mdmoura/pen/IDakn

Но мне нужен знак «+», чтобы быть больше, то якорный текст.

Проблема заключается в том, что текст и знак «+» не выровнены по вертикали.

UPDATE

Как отметил Dale, используя высоту строки решает проблему, но:

Если я использую высоту строки: 1.5rem она отлично работает - http://codepen.io/mdmoura/pen/ogriw;
Если я использую линейную высоту: 1,5, то это не сработает - http://codepen.io/mdmoura/pen/IDakn;

Почему? Не следует ли указывать высоту линии без единиц?

Спасибо, Miguel

источник

2013-09-26 Miguel Moura

CSS высота строки будет проблема здесь. Дайте привязке строку высотой около 20 пикселей, чтобы она совпадала с текстом.

a{line-height:20px;}

источник

2013-09-26 10:53:19 Dale

Это дает якорь и: после + той же высоты линии, чтобы они выровнялись. – Dale

Я пробовал использовать размер шрифта и высоту строки в rem, и он работает ... Но когда я использую размер шрифта в rem и line-height без единиц, поэтому line-height: 1.5 он не работает. Любая идея, почему это происходит? См. Пример: http://codepen.io/mdmoura/pen/IDakn –

@Shapper вы даете разные размеры шрифта исходному элементу и псевдоэлементу. если вы даете линейную высоту без единиц, тогда высота линии будет относиться к их размерам шрифта. Следовательно, вы не видите никаких изменений. Поэтому дайте строке высоту единицу типа 'px', так что высота линии будет одинаковой для обоих элементов, не зависящих от их размеров шрифта. Надеюсь, вы понимаете мое объяснение. –

Это может быть обман, но вы можете использовать line-height на вашем :after для регулировки вертикального выровнять:

&:after {  
    line-height:0.5em;  
    }

источник

2013-09-26 10:53:07 Bigood

Vertical Align Якорь с: После

ответ

Смежные вопросы