Question

I applied the following CSS to the above text. How to make the underline of above hyperlink to be appear as the one below. For example like this one

.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

To make a text underline different from the text’s colour, you need border-bottom.

border-bottom: 1px grey solid;

JSFiddle here

You can use padding-bottom / padding-top and line-height to control the distances between text and border, and each line.