html - 如何强调在两行上展开的超链接。 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 here

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