So I've read the previous disccussion on this topic and I understand that text-decoration is propagated instead of inherited, but the spec doesn't say why. I'm trying to get a better understanding of why this is, and why the positioning matters. What are the benefits of this behavior? I was surprised by it because it's non-intuitive. Are there any other examples of this in CSS that I should be aware of?
Consider this mark-up, which pre-dates CSS.
<strike>The <a href="http://example.com/">example</a> is here.</strike>
<strike> is by default text-decoration:line-through while <a href="..."> is by default text-decoration:underline. Pre-CSS, the word "example" would be both underlined and struck out, so CSS needed to be able to implement the same effect. To do this, the spec writers chose to make text-decoration accumulate rather than inherit.
The alternative would have been to give each text-decoration value its own property. The father of CSS, Håkon Wium Lie, addresses this in a message to the www-style mailing list in May 1997:
There is no easy way to turn off blinking without also throwing out other values set on the text-decoration property. This was sacrificed for the sake of brevity -- the alternatives would be to have separate binary properties for all values on 'text-decoration'.
At the time it was envisaged that text-decoration would be extended to have more than the four decorations it eventually had - several had already been dropped from the draft spec.
So there you have it, the designers of CSS did not want a proliferation of properties at that time.
It's difficult to prove such a negative, but I'm not aware of any other properties that propagate in this way.