Styling links (span)

HTML-CSS
1

Hello,

I’m having a hard time trying to remove the underline in a link inside a span. This is the HTML:

type or<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod. Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore. <a href="#"><span class="more">More &raquo</span></a></p> paste code here

and this is the CSS:

.more {
    font-size: 0.7rem;
    color: #cd0021;
    font-weight: bold;
    letter-spacing: 1px;
}

.more:link {
    color: #cd0021;
    text-decoration: none;
}

.more:visited {
    color: #cd0021;
}

.more:hover {
    color: #c2131f;
}

I’ve looked at the W3Schools website https://www.w3schools.com/css/css_link.asp

but I’m unable to get rid of the underline in the link.

Normally, I style buttons like this:

CSS:

.btn-learn-more {
    background-color: #cd0021;
    color: #fff;
    border: none;
    padding: 12px;
    text-align: center;
    letter-spacing: 1px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: bold;
    margin: 4px 2px 30px 0px;
    cursor: pointer;
}

.btn-learn-more:visited {
    color: #fff;
}

.btn-learn-more:hover {
    background: #c2131f;
    transform: scale(0.98);
}

HTML:

<a href="#" class="btn-learn-more">Learn More</a>

and it works perfectly fine. Can you please point in the right direction? Thanks

2

try removing the span and giving the class to the anchor element instead

you need to change the style of the anchor element directly if you want to change its style

1 Like
3

The underline is gone now but I can’t influence the hover. I left the HTML as it but changed the CSS to this:

.more {
    font-size: 0.7rem;
    color: #cd0021;
    font-weight: bold;
    letter-spacing: 1px;
}

a:link {
    color: #cd0021;
    text-decoration: none;
}

a:visited {
    color: #cd0021;
}

a:hover {
    color: orange;
}
4

try with <a href="#" class="more">More &raquo</a>

1 Like
5

It works now, there is no underline but it did affect this one:

HTML

<a href="#" class="btn-info">More Information</a>

CSS

.btn-info {
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    display: inline-block;
    margin-top: 20px;
    padding: 8px 40px;
    transition: 0.5s;
    border: 2px solid #fff;
    border-radius: 5px;
    color: #fff;
    background: #cd0021;
    cursor: pointer;
}


.btn-info:hover {
    background-color: #c2131f;
    transform: scale(0.98);
}

The “More Information” text is no longer white (when it should) and when I hover the text turns orange (which shouldn’t happen). I’m not sure what is going on.

6

Ok, I made it work now, this how I changed it to make it work:

.btn-info {
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    display: inline-block;
    margin-top: 20px;
    padding: 8px 40px;
    transition: 0.5s;
    border: 2px solid #fff;
    border-radius: 5px;
    color: #fff;
    background: #cd0021;
    cursor: pointer;
}

.btn-info:link {
    color: #fff;
    text-decoration: none;
}

.btn-info:visited {
    color: #fff;
}

.btn-info:hover {
    background-color: #c2131f;
    transform: scale(0.98);
}
7

Many thanks for your help. :+1: