примеры - псевдоэлементы css




«Text-decoration» и псевдоэлемент «: after», пересмотренный (7)

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

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

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

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

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

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

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


Вы можете автоматически выбирать ссылки на 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, когда вы используете контент до и после контента для дозирования кавычек.


Единственное, что сработало для меня, - это объявление отдельного повторного селектора с тем же свойством text-decoration, что оно наследуется от его родителя, а затем в главном селекторе, устанавливая text-decoration в 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.
}

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

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


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

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

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

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

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

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.


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

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

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

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

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





pseudo-element