Remove text decoration when div is linked

Question

So I made a div as a box with text. When I then put it in < a href="#" > tag It looks like this:

https://i.gyazo.com/8103b9cc1968842e88afa4c4971b64ea.png

My problem is that I can't remove the line under the text.

My code:

HTML:

<div class="sommersalg">

    <div id="prosent">
        50%-75%
    </div>

    <p>SOMMERSALG</p>

    <a href="produkter.html">
        <div id="handle">
            HANDLE NÅ
        </div>
    </a>

</div>

CSS

.sommersalg a #handle {

    margin: auto;
    border-radius: 7.5px;
    position: relative;
    top: -290px;
    color: #586e72;
    background-color: white;
    font-size: 15px;
    width: 250px;
    padding: 15px;
    text-align: center;
    font-family: 'Raleway', sans-serif;
    cursor: pointer;
    box-shadow: 0px 2px 5px #3686a3;
    text-decoration: none;
}

.sommersalg #handle:hover {
    top: -289.25px;
    box-shadow: 0px 0px 0px #3686a3;
    text-decoration: none;
}

The native behaviour is to underline the link, not the `#handle`. Use `.sommersalg a:hover` as a selector instead https://jsfiddle.net/awzh91yv/3/ — baao, Aug 12 '17 at 19:31
Ok, so now it works when I hover on it, but how can I remove the line when I am not hovering on it @baao — Lars Fredrik, Aug 12 '17 at 19:35

score 4 · Accepted Answer · answered Aug 12 '17 at 19:49

You have to set the <a> tag to text-decoration: none;. Not the div inside.

.sommersalg a #handle {

    margin: auto;
    border-radius: 7.5px;
    position: relative;
    top: -290px;
    color: #586e72;
    background-color: white;
    font-size: 15px;
    width: 250px;
    padding: 15px;
    text-align: center;
    font-family: 'Raleway', sans-serif;
    cursor: pointer;
    box-shadow: 0px 2px 5px #3686a3;
    text-decoration: none;
}

.sommersalg #handle:hover {
    top: -289.25px;
    box-shadow: 0px 0px 0px #3686a3;
    text-decoration: none;
}

.sommersalg a {
  text-decoration: none;
 }

<div class="sommersalg">

    <div id="prosent">
        50%-75%
    </div>

    <p>SOMMERSALG</p>

    <a href="produkter.html">
        <div id="handle">
            HANDLE NÅ
        </div>
    </a>

</div>

score 0 · Answer 2 · answered Aug 12 '17 at 19:43

0

first of all put the text inside of a p tag , then use this code in your CSS file :

#handle > p { text-decoration:none;}

instead of p tag u also can use span , by then your css should be :

#handle > span {text-decoration:none;}

just note that p is blocked by nature (means that it takes whole width) but span is not and it just takes what ever it needs from width!

answered Aug 12 '17 at 19:43

a_m_dev

4,228
5
29
54

1

is it possible to use id or class in p tag? I already have p's in my code.. – Lars Fredrik Aug 12 '17 at 19:49
1

Yes you can use both of them – a_m_dev Aug 12 '17 at 19:49

score 0 · Answer 3 · answered Aug 12 '17 at 19:44

0

The problem is with div element inside the element, as discussed here. Have you added an html doctype?

The "text-decoration: none;" is all right in .sommersalg a. You do not need to add a :hover part.

answered Aug 12 '17 at 19:44

Geff

142
1
12

Remove text decoration when div is linked

3 Answers3