CODEWITHSUNDEEP
htmlcsshyperlink
code master
code master

Reputation: 2026

How to underline the hyper-link spreaded on two lines. CSS-HTML geeks?

alt text

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 alt text

.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; 
}

Upvotes: 1

Views: 1017

Answers (2)

Pekka
Pekka

Reputation: 449395

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.

Upvotes: 6

Kyle
Kyle

Reputation: 67194

I think you're looking for:

CSS:

.myClass a
{
   text-decoration: underline;
}

Instead of none like you have.

Upvotes: 2

Related Questions