2016-10-25 2 views
2

Как всегда отображать атрибут alt тега привязки в HTML?Как всегда отображать атрибут alt тега привязки

Вот ситуация, когда у меня есть несколько повторяющихся сеток, и я хочу идентифицировать их с датой.
Так что я хочу показать название всегда, как я могу это достичь?

<a href="#" title="created at 12 october">see details</a> 
<a href="#" title="created at 13 october">see details</a> 
<a href="#" title="created at 14 october">see details</a> 

Вот демо: https://jsfiddle.net/wub5y96d/1/

+0

Ввод текста анкер будет лучше – Satpal

+0

@ Satpal, как это может быть сделано – EaB

+0

@Satpal, в HREF я хочу, чтобы включить некоторые ссылки страницы – EaB

ответ

9

Вы можете вывести содержимое атрибута элемента, используя content: attr(attribute); на одном из псевдо элементов ::after или ::before, как это:

a[title]::after { 
    content: ' ('attr(title)')'; 
} 

Demo

+0

Для полноты, я хотел бы предложить использовать ': before' в этом случае, так как': before' соответствует «Создано в 14 октября - см. Больше» лучше. – Roberrrt

+1

Я бы решил, какой из них использовать в зависимости от позиции, которую OP хочет отобразить. Если он пожелает вашего предложения, он должен использовать ':: before', если он хочет чего-то вроде« увидеть детали (созданные 3 октября) »,« :: after »- естественное решение. – connexo

+0

@Roberrrt, я собирался принять ваш ответ, но вы удалили, теперь у меня есть хороший выбор i, e connexo. – EaB

2

попробовать этот простой цикл

$('a').each(function(){ 
var text = $(this).text(); 
var title = $(this).attr('title'); 
$(this).text(text+'-'+title); 
}); 
+0

Зачем использовать Javascript (или даже jQuery) здесь? – connexo

+0

потому что он может :) – madalinivascu

+2

Это не аргумент. – Roberrrt

2

Почему люди продолжают использовать Fiddle's. Когда Snippets будут работать так же хорошо .. :)

Вы можете запускать их прямо внутри SO, насколько это круто. О, ну, может быть, это только мне ..

a::after { 
 
    position: absolute; 
 
    top: 16px; 
 
    left: 0px; 
 
    width: 200px; 
 
    color: silver; 
 
    content: attr(data-created); 
 
    font-size: smaller; 
 
} 
 
a { 
 
    position:relative; 
 
    display:inline-block; 
 
    height: 30px; 
 
}
<div> 
 
    <a href="#" data-created="created at 12 october">see details</a> 
 
</div> 
 
<div> 
 
    <a href="#" data-created="created at 15 october">see details</a> 
 
</div>

Смежные вопросы