CSS: how do I remove the underline from a link that isn't directly in the anchor tag?

Question

<a href="/admin/menu_bars/select">
    <div class="action_box right">
        Manage Menu Bars
    </div>
</a>


a .action_box {
text-decoration: none;
}

doesn't work =\

You cant have a `div` inside of an anchor. Use `span` instead. — Kyle, Mar 05 '11 at 23:04
Note that `div`s can't be inside an anchor tag in any HTML standard. `div`s are block tags, while anchors are inline tags. And there can only be inline tags inside of other inlines. — Holger Just, Mar 05 '11 at 23:06
If you change the div to a span element, or if you apply display:block to the anchor tag, that wouldnt be a problem' — Moses, Mar 05 '11 at 23:09
@Kyle, @Holger Just: It is valid in HTML5, and the main reason it is is that all major browsers supported it even though it's not valid HTML4. So even if it's not valid right now, in practice, it'll work anywhere. (more infos there: http://html5doctor.com/block-level-links-in-html-5/) — zneak, Mar 05 '11 at 23:10
duplicate post, your ans [here](http://stackoverflow.com/questions/2041388/how-to-remove-the-underline-for-anchorslinks) — Pran, Dec 13 '15 at 20:42

score 16 · Accepted Answer · answered Mar 05 '11 at 23:05

Your code is trying to remove the underline from the div (which probably doesn't have one) rather than the link (which probably does). Simply

a {
text-decoration: none;
}

will work, although that will remove the underline from all links.

If you need to be more specific to that link then use

<a class="action_link" href="/admin/menu_bars/select">
    <div class="action_box right">
        Manage Menu Bars
    </div>
</a>


a.action_link {
text-decoration: none;
}

This assumes that the underline is in fact a text-decoration on the link element and not a border-bottom on the div.

It was a 1px `box-shadow` in my case. – Aaron Hooper Jan 29 '20 at 17:30 — Aaron Hooper, Jan 29 '20 at 17:30

iwalkbarefoot · Answer 2 · 2011-03-05T23:06:31.580

1

You still need to apply the text-decoration style to the outer href tag.

Example follows:

<html>
    <head>
        <style>
        .noUnderline {
        text-decoration: none;
        }
        </style>
    </head>
  <body>
    <a class="noUnderline" href="/admin/menu_bars/select">
        <div class="action_box">
            Manage Menu Bars
        </div>
    </a>
</body>
</html>

edited Mar 05 '11 at 23:06

answered Mar 05 '11 at 23:00

iwalkbarefoot

955
7
15

score 1 · Answer 3 · edited Mar 06 '11 at 03:19

1

Problem is, it's not putting the underline under the text, it's underlining the div. Basically you'd need to define the rule at the anchor still, not for the content inside the anchor:

a, a .action_box { text-decoration: none; }

edited Mar 06 '11 at 03:19

Tim Stone

19,119
6
56
66

answered Mar 05 '11 at 23:05

chris lewis

11
2

score 0 · Answer 4 · answered Oct 01 '14 at 02:43

0

Can you not just use this.

#content > ul {
             text-decoration: none;
           }

The above obviously is my own.

answered Oct 01 '14 at 02:43

Houston

1

score 0 · Answer 5 · answered Mar 05 '11 at 23:04

0

It quite possibly could be an issue of another class / property is overriding your latest attempt; however, try what Silence Dogood said:

a div .action_box {
   text-decoration: none;
}

If that doesn't work we'll need to see the rest of the CSS.

answered Mar 05 '11 at 23:04

Jeff Andersen

332
8
14

You caught my initial guess, unfortunately it was incorrect :( I made updates for it to work correctly. – iwalkbarefoot Mar 05 '11 at 23:14

score 0 · Answer 6 · answered Oct 04 '18 at 12:59

You are trying to remove underline from div which is inside the anchor tag

Simply use

a{
text-decoration: none;
}

You can give id to anchor tag for better use,

<a id="linkid" href="/admin/menu_bars/select">
    <div class="action_box right">
        Manage Menu Bars
    </div>
</a>

and use css

a#linkid{

     text-decoration: none;
}

CSS: how do I remove the underline from a link that isn't directly in the anchor tag?

6 Answers6

Linked