“оформление текста” и псевдоэлемент “:after”, пересмотренный

Question

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

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

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

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

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

Answer 1

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

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

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

...

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

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

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

Answer 2

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

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

Answer 3

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

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.

Answer 4

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

a {
  text-decoration: none;
  border-bottom: 1px solid blue;
}
a:after {
  content: "foo";
  border-bottom: 1px solid white; /* same color as the background */
}

Answer 5

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

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

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.
}

Answer 6

Что я делаю, так это добавляю интервал внутри элемента 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;
}

Answer 7

Я понимаю, что это не отвечает на вопрос, который вы задаете, но есть ли причина, по которой вы не можете использовать следующее (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 соблюдает свойство класса селектора, а не псевдокласса.Может быть, все же стоит поэкспериментировать с разными типами документов?Переходный, а не строгий режим иногда допускает разные результаты (хотя и не всегда лучше результаты...).

Редактировать:

Похоже, что использование

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

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

Answer 8

Вы можете автоматически выбирать ссылки на pdf-файлы с помощью:

a[href$=".pdf"]:after { content: ... }

IE менее 8 можно включить для правильной работы, внедрив эту ссылку в заголовок html-файла:

<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script><![endif]-->

Это также очень хорошо работает во всех версиях IE, когда вы используете after-before-content-thing для воспроизведения кавычек.

Answer 9

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

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, хотя не тестировалось ни в каких других браузерах, удачи!

Answer 10

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

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

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

.next_page:after {
    content: ')';
}

Answer 11

1)

:after{
    position: absolute;
}

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

2)

:after{
    display: inline-block;
}

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

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