0

I'm having trouble removing a text-decoration: underline property.

My stylesheet reads:

a {
    text-decoration: underline;
    }

a:link .product-price {
    text-decoration: none !important;
    }

My HTML reads:

<div class="product">
 <a>
  <img />
  <div class="product-info">
    <div class="product-title"></div>
    <div class="product-price"></div>
    <div class="product-reviews"></div>
  </div>
  </a>
</div>

Chrome's inspector is showing:

a:link .product-price {
    text-decoration: none !important;
    }

Then further down, greyed out (under the heading "Inherited from a"):

a {
    text-decoration: underline;
    }

Why is the inherited style overwriting my applied style, which has more specificity, an !important tag, and appears lower down in the calling order? Wouldn't my applied style appear like this if it was being overwritten:

text-decoration: none !important;

I'm flummoxed.

Phil Penny
  • 113
  • 1
  • 17

1 Answers1

1

You could add display:inline-block to that product-price element. It's about the text-decoration propagation from parent to child.

Text-decorations are not propagated to inline-block elements. So you don't even have to add text-decoration: none

.product-price {
  display:inline-block;
}
<a href="#">
<span class='product-price'>no underline</span>
Link Text
</a>
Mihai T
  • 17,254
  • 2
  • 23
  • 32
  • Please tell me why this works? – Phil Penny Jan 23 '20 at 11:55
  • 1
    It's just how text-decoration works. From `docs` : `Underlines, overlines, and line-throughs are applied only to text (including white space, letter spacing, and word spacing): margins, borders, and padding are skipped. User agents must not render these text decorations on content that is not text. For example, images and inline blocks must not be underlined.` -> https://www.w3.org/TR/CSS2/text.html#lining-striking-props – Mihai T Jan 23 '20 at 11:56
  • 1
    @PhilPenny here is a more detailed explanation https://stackoverflow.com/questions/13857853/why-does-display-inline-block-remove-an-underline-from-a-child-element – Mihai T Jan 23 '20 at 11:59