勤奋跑站的我㕛㕛㕛嫖来了一个好看的链接样式

本来不打算做链接的，咱自己也是有自知之明的，经常折腾，由于不懂技术，还喜欢折腾，闹不好就的删库重来，怕拖累做链接的朋友们，就一直没考虑过链接这个事情。
事情的转折点在于我昨天突然看到了一个留言，竟然有大佬主动找我链接，荣幸之至，就简单的做了个链接指向，本来想着这事就过去了，但是心里总感觉对不住大佬的热情，今天周末也没事，敲完茶盘（回头单开细说）没啥事，就跑回站把，发现一个好看的链接样式，就没忍住嫖来了，别说，这个目前还真是我最喜欢的样子，简洁，演示参看我的友联页面
不废话了，上干货。

前端代码

（记得用!!!包裹）：

<div class="links"> 
<ul> 
<li> <a href="https://m-n.top" target="_blank" data-no-instant="" title="这里记录的是泯轲生活上的一些小小的事情 - 泯轲碎碎念"><span class="sitename">泯轲碎碎念</span><div class="linkdes">轲生活上的一些小小的事情</div></a></li>
<li><a href="#" target="_blank" data-no-instant="" rel="noopener" title="和我链接请下面留言"><span class="sitename">虚位以待</span><div class="linkdes">和我链接请下面留言</div></a></li>
<li><a href="#" target="_blank" data-no-instant="" rel="noopener" title="和我链接请下面留言"><span class="sitename">虚位以待</span><div class="linkdes">和我链接请下面留言</div></a></li>
<li><a href="#" target="_blank" data-no-instant="" rel="noopener" title="和我链接请下面留言"><span class="sitename">虚位以待</span><div class="linkdes">和我链接请下面留言</div></a></li>
<li><a href="#" target="_blank" data-no-instant="" rel="noopener" title="和我链接请下面留言"><span class="sitename">虚位以待</span><div class="linkdes">和我链接请下面留言</div></a></li>
</ul> </div>

CSS：

/*链接*/
.links ul li a{
color: #58666e;
}
.linkdes {
overflow: hidden;
margin-bottom: 0px;
border-top: 1px dashed #ddd;
color: #949494;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
line-height: 25px;
-webkit-transition: all .5s;
transition: all .5s;
margin-bottom: 0px!important; 
margin-top: 0px!important; 
}
.links ul {
display: inline-block;
margin: 0;
padding: 0;
width: 100%;
list-style: none;
min-height: 57px;
}
.links ul li {
position: relative;
float: left;
overflow: hidden;
padding: 10px 25px;
width: 50%;
border: 1px solid #cfcfcf;
-webkit-transition: all .3s;
transition: all .3s;
background-color: white;
border-radius: 4px;
min-height: 57px;
}
.links ul li:hover {
border: 1px solid #119848;
border-radius: 15px;
}
.links ul li a:hover {
color: #119848;
font-style: normal!important;
}
.line{
border-bottom: 1px solid #cfcfcf;
margin-top: 15px;
margin-bottom: 15px; 
}
@media ( max-width: 984px ) {
.links ul li {
width:41%;
}
}
@media ( max-width: 768px ) {
.links ul li {
width:40%;
}
}
@media ( max-width: 603px ) {
.links ul li {
width:39%;
}
}
@media ( max-width: 545px ) {
.links ul li {
width:38%;
}
}
@media ( max-width: 503px ) {
.links ul li {
width:37%;
}
}
@media ( max-width: 469px ) {
.links ul li {
width:36%;
}
}
@media ( max-width: 459px ) {
.links ul li {
width:87%;
padding-right: 18px;
}

这里调整宽度： width: 50%;