CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user5405873
user5405873

Reputation:

How to always display the alt attribute of an anchor tag

How to always display the alt attribute of an anchor tag in HTML?

Here is a situation where I have multiple repeating grids and I want to identify with date.
So i want to show the title always, how can I achieve this?

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

Here is a demo: https://jsfiddle.net/wub5y96d/1/

Upvotes: 1

Views: 612

Answers (3)

Keith
Keith

Reputation: 24181

Why do people keep using Fiddle's. When Snippets will work just as fine.. :)

You can run them directly inside SO, how cool is that. Oh, well maybe it's just me.. 

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>

Upvotes: 0

madalinivascu
madalinivascu

Reputation: 32354

try this simple loop

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

Upvotes: 1

connexo
connexo

Reputation: 56770

You can output the content of an element's attribute using content: attr(attribute); on either of the pseudo elements ::after or ::before, like this:

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

Demo

Upvotes: 8

Related Questions