如何总是显示锚点标记的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/

来源

2016-10-25 EaB

请辞锚文本会更好 – Satpal

@ Satpal，怎么可以做 – EaB

@Satpal，在HREF我想包括一些页面引用 – EaB

可以输出元素的属性在任伪元素::after或::before的使用content: attr(attribute);，喜欢的内容这个：

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

Demo

来源

2016-10-25 09:41:21 connexo

为了完整起见，我想建议在这种情况下使用'：before'，因为'：before'适合于'10月14日创建 - 看到更多'更好。 – Roberrrt

我真的会根据OP想要渲染属性内容来决定使用哪一个。如果他希望你的建议，他应该使用':: before'，如果他希望看到像“看到细节（10月3日创建）”，'::之后'是自然的解决方案。 – connexo

@Roberrrt，我即将接受你的回答，但你已经删除，现在我有很好的选择，我connexo。 – EaB

试试这个简单的循环

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

来源

2016-10-25 09:41:14 madalinivascu

为什么在这里使用JavaScript（甚至jQuery）？ – connexo

，因为他可以:) – madalinivascu

这不是一个争论。 – Roberrrt

为什么人们继续使用Fiddle's。当片段将工作得很好.. :)

你可以直接在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>

来源

2016-10-25 09:51:22 Keith

如何总是显示锚点标记的alt属性

回答

相关问题