Селектор первой буквы CSS в ссылке

В настоящее время у меня болит голова от этого проклятого псевдоэлемента под названием :first-letter. Это кажется таким полезным, но в конечном итоге не работает так, как я ожидал.

Вот пример на jsfiddle, как я пытался и как это должно выглядеть:

FIDDLE здесь

Как видите, :first-letter ничего не делает. Я ожидал, что он перезапишет обычные настройки ссылки, а также селектор :hover.

Что могло пойти не так? Любая другая идея, как добиться этого только с помощью CSS?


css css-selectors pseudo-element
person user828591    schedule 30.11.2012    source источник
comment
Чтение здесь может быть полезно reference.sitepoint.com/css/pseudoelement-firstletter выглядит не так далеко, как вы ожидаете. Из моих тестов я смог заставить этот селектор работать только с тегами p, по крайней мере, пока.   -  person Pebbl    schedule 30.11.2012
comment
Я не исследовал, но тестирование этой скрипки говорит: а) » не считается буквой и б) :first-letter не работает с тегами <a>. Я заставил его работать как тег ap с буквой, скрытой перед M: jsfiddle.net/4DnKu/2   -  person Andy    schedule 30.11.2012
comment
можете ли вы опубликовать изображения желаемого результата изображения.........   -  person Shailender Arora    schedule 30.11.2012
comment
Проверьте это stackoverflow.com/questions/7631722 /   -  person sandeep    schedule 30.11.2012
comment
@sandeep: Это должно быть причиной! Ссылки по умолчанию являются встроенными, и в моем случае мне понадобится встроенный элемент.   -  person user828591    schedule 30.11.2012
comment
@Shailender Arora: мне нужна вторая ссылка, но с разметкой первой ссылки (без диапазона).   -  person user828591    schedule 30.11.2012

Ответы (1)


arrow_upward
5
arrow_downward

Вместо того, чтобы помещать «»» в HTML, вы можете поместить его в CSS.

http://jsfiddle.net/4DnKu/4/

a.one:before {
    content: "»";
    color:#0F0;
    padding:0 5px 0 0;
}

ИМХО, этого не должно быть в HTML, так как на самом деле это просто украшение.

Псевдоэлементы поддерживаются всеми основными браузерами, только с IE‹8 у вас возникнут проблемы. Там вы можете использовать выражения CSS в качестве обходного пути (обращайтесь с осторожностью!):

a.one {
    *zoom: expression( (new Function('elem', '\
        if(elem.before)\
            return;\
        elem.innerHTML = "<span class=ie7-before>»</span>" + elem.innerHTML;\
        elem.before = true;\
        elem.style.zoom = "1";\
    '))(this) );
}

a.one > .ie7-before,
a.one:before {
    content: "»";
    color:#0F0;
    padding:0 5px 0 0;
}

Здесь используется довольно много хаков, поэтому я бы не рекомендовал его использовать, если вы не понимаете, что там происходит.

person dave    schedule 30.11.2012
comment
Вы правы, мне не нравится, как стрелка написана в HTML, лучше всего сгенерировать ее с помощью CSS. Ваше решение почти идеально - почти... в моем случае также нужно, чтобы стрелка больше не имела подчеркивания. Как вы думаете, это возможно? - person user828591; 30.11.2012
comment
По сути, вы добавили встроенный блок (и немного запаса для нового позиционирования), это круто, я бы никогда об этом не узнал. Спасибо!! - person user828591; 30.11.2012