CSS text-decoration property cannot be overridden by child element [duplicate]

by

From the text-decoration spec:

The ‘text-decoration’ property on descendant elements cannot have any effect on the decoration of the ancestor.

The answer in the linked question further quotes (I can’t find this text in the spec anymore however):

Text decorations on inline boxes are drawn across the entire element, going across any descendant elements without paying any attention to their presence.

And another quote, CSS3 seems to introduce text-decoration-skip, intended to address this by applying the property on the descendant (in your case, <span>):

This property specifies what parts of the element’s content any text decoration affecting the element must skip over. It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors.

More Related Contents:

  1. How do I select the “last child” with a specific class name in CSS? [duplicate]
  2. CSS :after not adding content to certain elements
  3. Center an element in Bootstrap Navbar
  4. Should I use max-device-width or max-width?
  5. CSS Font Border?
  6. What does flex: 1 mean?
  7. Smallest data URI image possible for a transparent image
  8. What is the purpose of the ‘@’ symbol in CSS?
  9. Pure CSS collapse/expand div
  10. What does a[href^=”…”] do in CSS?
  11. Pure CSS scroll animation
  12. How to stick a footer to bottom in css?
  13. pure CSS multiple stacked position sticky?
  14. Next.js Global CSS cannot be imported from files other than your Custom
  15. CSS Specificity and Inheritance
  16. Nested rows with bootstrap grid system?
  17. How do I line up 3 divs on the same row?
  18. Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?
  19. Offsetting columns is not working (Bootstrap v4.0.0-beta)
  20. Filling water animation
  21. How to ignore parent element’s overflow:hidden in css
  22. What is caret symbol ^ used for in css when selecting elements?
  23. when scaling an element with css3 scale, it becomes pixelated until just after the animation is complete. I’m animating an element with a border
  24. How do I make text bold in HTML?
  25. How to skip first child?
  26. Is it acceptable to use tables for forms? Or is it still more correct to use divs?
  27. Two css files defining same class
  28. How to use variable in CSS? [duplicate]
  29. Is a CSS property starting with a hash (#) valid?
  30. Latest on CSS parent selector [duplicate]

Leave a Comment