«Текстовое оформление» и псевдоэлемент «: после» в Firefox 8 - PullRequest
Новая
       28

«Текстовое оформление» и псевдоэлемент «: после» в Firefox 8

1 голос
/ 20 ноября 2011

На странице (которую я поддерживаю для себя и поэтому могу ограничить поддержку браузера до FF 3.5+) я хотел бы добавить «SO» после каждой ссылки на StackOverflow.com. Сначала я сделал это так ... 

a[href^='https://stackoverflow.com/']:after {
  content: "SO";
  font-size: x-small;
  color: #333333;
  padding-left: 1px;
  position: relative;
  bottom: 3px;
}

… но Firefox подчеркнул «ТАК», как и сама ссылка. Прочитав вопросы

… Я нашел следующее решение: 

a[href^='https://stackoverflow.com/']:after {
  content: "SO";
  font-size: x-small;
  color: #333333;
  padding-left: 1px;
  position: relative;
  bottom: 3px;
  /* clear the underline */
  padding-bottom: 5px;
  background-color: white;
}

Может быть, это взломанный, но довольно интуитивно понятный (подчеркивание скрыто фоном над ним), и он работал хорошо (не помню, чтобы я проверял это в браузерах, кроме FF 3.5 и FF 7, но все же FF это единственный браузер, который я действительно хочу поддерживать). Проблема в том, что код сломался в FF 8: приведенный выше код с подчеркиванием не работает. Поэтому я ищу решение.

На самом деле, я уже нахожу один: добавление «display: inline-block», но:

  • это может привести к переносу "SO" в новую строку
  • его нельзя использовать вместе со старым кодом подчеркивания, потому что к самой ссылке добавляется padding-bottom

http://cssdesk.com/5TqEN

Последнее замечание: я хочу, чтобы оно работало, по крайней мере, в FF 3.5 и FF 8, только с CSS, без создания текста текста "SO", лучше, чем решение inline-block

1 Ответ

2 голосов
/ 20 ноября 2011

Я пришел с этим http://jsfiddle.net/wGb68/4/

a[href^='http://stackoverflow.com/'] {
    padding-right: 15px;
    display: inline-block; /* not needed, but fixes Chrome and Opera */
}

a[href^='http://stackoverflow.com/']:after {
    font-size: x-small;
    padding-left: 1px;
    content: "SO";
    color: #333;

    position: absolute;
}

Плохо очищение text-decoration работает только в Firefox и Opera с этим кодом. Я не мог заставить его работать в любом другом браузере. : /

display: inline-block не требуется в Firefox, но без него в Opera и Chrome "SO" не следует за переносом строки и даже перекрывает контейнер.

...