<a href="#" class="cp_link">リンクテキスト-link text-</a>
.cp_link {
padding: 5px;
position: relative;
display: inline-block;
transition: .3s;
color: #FF8F00;
text-decoration: none;/*元々のアンダーラインを非表示にしておく*/
}
/*hover時のアンダーライン*/
.cp_link::after {
position: absolute;
bottom: 5px;
left: 0;
content: '';
width: 100%;
height: 1px;
background-color: #FF8F00;
opacity: 0;
transition: .3s;
}
.cp_link:hover::after {
bottom: 0;
opacity: 1;
}