JSFiddle - React, Tailwind, and code Playground

by Lucas Krause

HTML

<a href="http://google.com" target="_self">this</a>
<a href="http://google.com">this, too</a>
<a href="http://google.com" target="_blank">new tab</a>
<a href="http://google.com" target="_new">new window</a>
<a href="http://google.com" target="foo">foo</a>
<iframe name="foo"></iframe>

CSS

a[href]:hover::after {
  display:block;
  padding:2px 5px;
  background-color:#FFF;
  color:#000;
  position:fixed;
  bottom:0;
  right:0;
  border:solid #BBB 0;
  border-width:1px 0 0 1px;
}
a[href][target]:hover::after {
  content:"open "attr(href)" in the frame \""attr(target)"\"";
}
a[href][target='_blank']:hover::after {
  content:"open "attr(href)" in a new tab";
}
a[href][target='_new']:hover::after {
  content:"open "attr(href)" in a new window";
}
a[href][target='_self']:hover::after,
a[href][target='_parent']:hover::after,
a[href][target='_top']:hover::after,
a[href]:not([target]):hover::after {
  content:"open "attr(href);
}