The trick is: They deactivated text-decoration
and added a rather complex, very thin red background at the very bottom of the line which looks like an underline. in addition they added a white text-shadow which overlaps the red "background". Together, this looks like an interrupted underline
This is the relevant CSS rule reponsible for this effect (in addition to text-decoration: none
):
.contents a {
color: #1A1A1A;
background: linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#FF3530,#FF3530);
background-size: .05em 1px,.05em 1px,1px 1px;
background-repeat: no-repeat,no-repeat,repeat-x;
text-shadow: .03em 0 #fff,-.03em 0 #fff,0 .03em #fff,0 -.03em #fff,.06em 0 #fff,-.06em 0 #fff,.09em 0 #fff,-.09em 0 #fff,.12em 0 #fff,-.12em 0 #fff,.15em 0 #fff,-.15em 0 #fff;
background-position: 0 95%,100% 95%,0 95%;
}