Поместить атрибуты title / alt в CSS: после {content: image}? - PullRequest
Новая
       8

Поместить атрибуты title / alt в CSS: после {content: image}?

9 голосов
/ 10 мая 2011

У меня есть следующий CSS, чтобы добавить значок PDF к любой ссылке, которая ссылается на PDF: 

a.pdf-link:after { padding-left: 2px; content: url(../images/icon-pdf-link.gif);}

Можно ли добавить некоторые атрибуты title и alt на это изображение?Мне бы хотелось, чтобы пользователь мог навести указатель мыши на значок и получить текст типа «Это ссылки на файл .pdf». Что я обычно делаю, просто добавляя к нему атрибуты заголовка, но не могу понятьесли я могу сделать это с помощью этого метода.

Ответы [ 3 ]

6 голосов
/ 10 мая 2011

Нет, content принимает только необработанные текстовые и графические данные, но не HTML.

Вам необходимо использовать JavaScript для динамического добавления всплывающих подсказок к существующим элементам HTML.

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

a.pdf-link {
    padding-left: 2px;
    padding-right: 20px;
    background: url(../images/icon-pdf-link.gif) right center no-repeat;
}

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

1 голос
/ 30 мая 2018

Вы можете сделать это сейчас, используя CSS3.

Согласно https://www.w3.org/TR/css-content-3/#alt:

1,2. Альтернативный текст для речи

Контенту, предназначенному для визуальных носителей, иногда требуется альтернативный текст для речевого вывода. Таким образом, свойство content допускает указание альтернативного текста после косой черты (/) после последней. Если предоставляется такой альтернативный текст, он должен использоваться вместо речевого вывода.

Это позволяет, например, исключать чисто речевой текст в речевом выводе (предоставляя пустую строку в качестве альтернативного текста) и позволяет авторам предоставлять более удобочитаемые альтернативы изображениям, значкам или текстовым символам. Здесь свойство content представляет собой изображение, поэтому для предоставления альтернативного текста требуется значение alt. 

.new::before {
  content: url(./img/star.png) / "New!";
    /* or a localized attribute from the DOM: attr("data-alt") */
}
0 голосов
/ 05 сентября 2013

Основываясь на ответе, я только что сделал следующее с jQuery: 

$(".pdf-link").before("<img src='../images/icon-pdf-link.gif' title='This link is a pdf' />");
...