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

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

47 голосов
/ 06 августа 2009

Я повторно задаю этот вопрос , потому что его ответы не сработали в моем случае.

В моей таблице стилей для печатных СМИ я хочу добавить URL после каждой ссылки, используя псевдокласс :after. 

a:after {
    content: " <" attr(href) ">";
    text-decoration: none;
    color: #000000;
}

В Firefox (и, вероятно, Chrome, но не IE8), text-decoration: none игнорируется, а подчеркивание простирается непривлекательно через нижнюю часть URL. Однако color правильно настроен на черный для URL. Есть ли способ заставить text-decoration работать?

В исходный вопрос добавлены изображения фиксированного размера вместо текста переменной ширины. В его ответах используются отступы и фоновые изображения, чтобы не использовать свойство text-художественное оформление. Я все еще ищу решение, когда содержание текста переменной ширины.

Ответы [ 11 ]

90 голосов
/ 28 марта 2013

Если вы используете display: inline-block в псевдо :after, объявление text-decoration будет работать.

Протестировано в Chrome 25, Firefox 19

22 голосов
/ 06 августа 2009

Реализация псевдоэлементов: before и: after в IE8 некорректна. Firefox, Chrome и Safari реализуют его в соответствии со спецификацией CSS 2.1.

5.12.3 Псевдоэлементы: before и: after

': до' и ': после' псевдоэлементы могут использоваться для вставки созданный контент до или после содержание элемента . Они объяснили в разделе о сгенерированном тексте.

...

Каскадные таблицы стилей Уровень 2 Редакция 1 (CSS 2.1) Спецификация

В спецификации указывается, что содержимое должно быть вставлено до или после содержимого элемента , , а не элемента (т.е. содержимого: до содержимого содержание: после ). Таким образом, в Firefox и Chrome текстовое оформление, с которым вы сталкиваетесь, находится не на вставленном контенте, а на родительском элементе привязки, который содержит вставленный контент.

Я думаю, что ваши варианты будут использовать технику background-image / padding, предложенную в вашем предыдущем вопросе, или, возможно, обернуть ваши якорные элементы в элементы span и применить вместо этого псевдоэлементы к элементам span.

9 голосов
/ 30 мая 2014

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

http://jsfiddle.net/r45L7/

a {
    text-decoration: underline;
}

a:after {
    content: "»";
    display: inline-block;
    text-decoration: none;
    height:16px;
    overflow: hidden;
    padding-left: 10px;
}

Работает на IE, FF, Chrome.

6 голосов
/ 08 октября 2012

В качестве альтернативы вы можете использовать нижнюю границу, а не текстовое оформление. Это предполагает, что вы знаете цвет фона 

a {
  text-decoration: none;
  border-bottom: 1px solid blue;
}
a:after {
  content: "foo";
  border-bottom: 1px solid white; /* same color as the background */
}
3 голосов
/ 25 мая 2016

Единственное, что сработало для меня, - это объявить отдельный повторный селектор с тем же свойством украшения текста, которое он наследовал от своего родителя, а затем в главном селекторе, установив для text-украшение значение none.

IE, очевидно, не знает, что делать, когда вы устанавливаете text-decoration: none для псевдоэлемента без того, чтобы у этого элемента было объявлено свойство text-украшение (которое по умолчанию не имеет ничего объявленного по умолчанию). Это не имеет особого смысла, потому что оно явно наследуется от родителя, но, увы, теперь у нас есть современные браузеры. 

span.my-text {
  color: black;
  font-size: 12px;
  text-decoration: underline;
}

span.my-text:after {
  text-decoration: underline; // Have to set text-decoration here so IE knows it can be overwritten below
}

span.my-text:after {
  color: red;
  text-decoration: none; // In the same repeated selector, we can now overwrite text-decoration in our pseudo element.
}
1 голос
/ 28 апреля 2017

Что я делаю, так это добавляю span внутри элемента a, например: 

<a href="http://foo.bar"><span>link text</span></a>

Тогда в вашем файле CSS: 

a::after{
  content:" <" attr(href) "> ";
  color: #000000;
}

a {
  text-decoration:none;
}

a span {
  text-decoration: underline;
}
1 голос
/ 06 августа 2009

Я понимаю, что это не ответ на вопрос, который вы задаете, но есть причина, по которой вы не можете использовать следующий (background подход): 

a.file_pdf {
background-image: url(images/pdf.png);
background-position: center right;
background-repeat: no-repeat;
padding-right: 15px; /* or whatever size your .png image is plus a small margin */
}

Насколько я знаю, реализация Firefox :after наблюдает за свойством класса селектора, а не класса psuedo. Может быть, стоит поэкспериментировать с разными типами документов? Переходный, а не строгий, иногда допускает разные результаты (хотя и не всегда лучше результаты ...).

Edit:

Похоже, что с помощью 

a:after {
    content: " <" attr(href) ">";
    text-decoration: none;
    color: #000000;
    background-color: #fff; /* or whatever colour you prefer */
}

переопределяет или, по крайней мере, скрывает text-decoration. Это не дает какого-либо ответа, но, по крайней мере, предлагает обходной путь.

0 голосов
/ 18 октября 2018

1) 

:after{
    position: absolute;
}

не идеально, потому что содержимое элемента не будет перенесено

2) 

:after{
    display: inline-block;
}

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

На данный момент я не смог найти идеальное решение, подходящее для всех 3 условий (1. Содержимое может автоматически переноситься, если оно слишком длинное 2. после этого содержимое должно переноситься с содержимым элемента, что означает, что содержимое не должно занимать одно self. 3.text-художественное оформление должно применяться только при условии, что элемент не применяется после контента.) Я думаю, сейчас используется другой способ имитировать текстовое оформление.

0 голосов
/ 11 марта 2013

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

Чтобы обойти это, я обернул URL в div и использовал что-то вроде этого. 

.next_page:before {
    content: '(';
}

.next_page:after {
    content: ')';
}
0 голосов
/ 06 октября 2010

Расположите содержимое абсолютно следующим образом: 

a {
    position: relative;
    margin: 0 .5em;
    font-weight: bold;
    color: #c00;
}
a:before,
a:after {
    position: absolute;
    color: #000;
}
a:before {
    content: '<';
    left: -.5em;
}
a:after {
    content: '>';
    right: -.5em;
}

Это работает для меня в Firefox 3.6, но не тестировалось ни в одном другом браузере, но удачи!

Страница:
...