Geek Answers Handbook

How to make an external CSS link available (target = "_ blank")?

I want to automate the assignment of the icon "external links" links, which go beyond the site (ie where a-tag contains target='_blank'). I have so far been successful in this use of pure CSS by doing this:

a[target="_blank"]:after {
    font-family:'Glyphicons Halflings';
    font-size: 0.8em;
    content: " \e164";
}

It works. However, the drawback here is that it does not meet the accessibility rules, as someone who relies on a screen reader does not see the icon. The solution would be to change the title a-tag attribute to say “Opens in a new window” (or, better yet, perhaps add it to the existing title attribute). I don’t think there is any way to do this in CSS, so I tried to use jQuery, which I know a little, but do not use on a regular basis.

I tried this:

<script>
$(document).ready(function(){
    $($("a").attr("target","_blank")).attr("title", "My external link");
});
</script>

But it changes all a-tags, not the ones that are with target='_blank'. I have to do something wrong in jQuery select - but I don’t see that (and I tried looking at jQuery docs and even tried the .each()-function without success).

, , .

+4
2
$("a[target='_blank']").attr("title", "My external link");

:) , , .each()

$("a[target='_blank']").each(function() {
    $(this).attr("title", "My eternal link");
});
+4

, a jquery $('a[target="_blank"]').attr("title", "My external link");

. (, )

_blank a, ( ). ,

+2

More articles:


All Articles