如何强调在两条线上传播的超链接.CSS-HTML极客？

Question

我将以下CSS应用于上述文本.如何使上面的超链接下划线显示如下.比如这个

.result-listingext h3 
{

    display:block;
    margin:0;
    padding-right:10px;
    padding-left:10px;
    color:#b2002f;
    font-family: Arial, Verdana;
    text-decoration: none; 
    background: white; 
    font-size:0.94em;
    font-weight:normal; 
    line-height:1.3; 
}

    .result-listingext h3 a:visited  
{
    font-family: Arial, Verdana;
    text-decoration: none;  
    background: white; 
    font-size:0.94em;
    color:#000;
    font-weight:normal;
    line-height:1.3; 
}   


.result-listingext h3 a:link,
.result-listingext h3 a:hover,
.result-listingext h3 a:focus,
.result-listingext h3 a:active {
    color:#b2002f;
        font-family: Arial, Verdana;
    text-decoration: none;  background: white; 
    font-size:0.94em;
    font-weight:normal;
    line-height:1.3; 
}

Answer 1

要使文本下划线与文本的颜色不同,您需要border-bottom.

border-bottom: 1px grey solid;

JSFiddle 在这里

您可以使用padding-bottom/ padding-top和line-height控制文本和边框之间以及每条线之间的距离.