<div>
Lorem <a href="http://example.com">ipsum</a> dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis <a href="http://example.com">parturient</a> montes, nascetur <a href="http://example.com">ridiculus</a> mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>
div{
width: 600px;
font-size: 20px;
margin: 2em auto;
text-align: center;
}
a{
position: relative;
color: #F55050;
text-decoration: none;
transition: .3s;
&:after{
content: "リンク先:"attr(href);
position: absolute;
top: -2em;
left: 0;
margin: 0 auto;
padding: 4px 6px;
background: rgba(0,0,0,0.85);
border-radius: 4px;
color: #fff;
font-size: 12px;
font-family: Verdana,sans-serif;
white-space: nowrap;
transition: .3s;
transform: scaleY(0);
}
&:hover{
color: #289DCC;
&:after{
transform: scale(1);
}
}
}
Also see: Tab Triggers