0

I stumbled over the following today:

 a { text-decoration: underline; }
 h1{ text-decoration:none;}
<a href="#"><h1>Title</h1></a>

This results in an underlined title element.

The rule for the block element does not apply. I realise that I have to style the anchor element for the desired effect. My question is: why?

What is the rule in the spec that describes this behaviour?

bruce182
  • 311
  • 4
  • 13
Teetrinker
  • 850
  • 1
  • 15
  • 30
  • 3
    When you put a small cardboard box with no bottom, into a larger box that does have a bottom, that bottom of the larger box does not magically dissolve in those places covered by the smaller box and leave a “hole” for stuff to fall through ... So why should this behave any different? – CBroe Jan 18 '18 at 09:36
  • another fun stuff for you: `text` + `.outer { color: green; text-decoration: underline; } .inner { color: black; }` gives green underline :) https://jsfiddle.net/58dsLvpq/ – YakovL Jan 18 '18 at 09:37
  • You should style your inner elements (guessing you have more than just the h1 shown) separately if you do not want them all to have an underline – Pete Jan 18 '18 at 09:38

2 Answers2

0

Just because your h1 is inside the a tag that have the underline..so you will see it underlined, but in fact just his container have the underline. Your css is working correctly.

If you want to remove the underline for linked h1, just invert the dom order:

a {
  text-decoration: underline;
}
<h1><a href="#">My Linked H1</a></h1>

<h1>Not linked H1</h1>
Mattia Astorino
  • 1,396
  • 14
  • 18
  • Thanks for the answer. But this is not true. If I add display:inline-block to the h1, there is no underline. From the spec: "Text decorations on inline boxes are drawn across the entire element, going across any descendant elements without paying any attention to their presence." More, see here: https://stackoverflow.com/a/1823388/603569 – Teetrinker Jan 19 '18 at 07:47
  • You not mentioned inline-block in your question. So with the default display this is one of the possible solutions. – Mattia Astorino Jan 19 '18 at 07:58
  • Maybe I was unclear. Your solution for sure works. My comment was pointed at your first sentence. (I am not looking for a solution, but for an explanation.) – Teetrinker Jan 19 '18 at 13:57
0

You can find here some docs here for the anchor tag.

As you can read:

By default, links will appear as follows in all browsers:

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

In your case you are setting the h1 with text-decoration:none , but in fact, the h1 has not text-decoration prop setted.

The a tag and childs are compiled by the browser with underline style by default.

Here some tips for styling anchor tags.

bruce182
  • 311
  • 4
  • 13