| <html> | |
| <head> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> | |
| <script> | |
| $(document).ready(function(){ | |
| $("a:has(img)").css("border", "solid red"); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <p><span>This is a span element inside a p element.</span></p> | |
| <p>This is a p element with no span element.</p> | |
| <a href="https://www.flickr.com/" target="_blank"><img class="alignnone wp-image-3813 size-full" src="http://testal.parcours-performance.com/wp-content/uploads/2015/08/837bb5351b255cdb3e1defb65ede240f-1200-x-450.jpg" alt="image 1200 px par 450px" width="1200" height="450"></a> | |
| </body> | |
| </html> |
I wanted to add an icon to links in external window (target = blank) but this icon also showed near images with an external link.
So I found a way to change the display of the icon when the was followed by an
And it works !
A Pen by Captain Anonymous on CodePen.
| img { | |
| max-width: 600px; | |
| height: auto; | |
| } | |
| a[target="_blank"]::after { | |
| content: "external"; | |
| display: inline-block; | |
| font-family: FontAwesome; | |
| font-size: 150%; | |
| color: #fa5c5d; | |
| text-decoration: underline; | |
| text-align: right; | |
| margin-left: 10px; | |
| } |