CSS : Amazingly strikethrough not working on child display:inline-block div

Question

I have a code where if I apply text-decoration: line-through; on outer div, all the inner div elements also must be 'strikethroughed'. This works 100% fine normally; But, if I put the child elements as 'display:inline-block', now the strikethrough applied to the parent div does not effect the strikeness to the childs. I have to put the childs as display:inline-block and I need the childs to be crossed out at the addition of text-decoration: line-through; to the parent div.

div{padding:10px;}
#outer{background:yellow;text-decoration: line-through;}
#inner{background:pink;display:inline-block;}

<div id=outer> 
  <div id=inner>
    This is the text 
  </div> 
</div>

This is an office project, and your help is appreciated !

Answer 1

Use text-decoration:inherit.

div{padding:10px;}
#outer{background:yellow;text-decoration: line-through;}
#inner{background:pink;display:inline-block; text-decoration:inherit}

<div id=outer> 
  <div id=inner>
    This is the text 
  </div> 
</div>

Normally, text-decoration is not an inherited property, so the inner div has an implicit text-decoration:none, the default. By using inherit, you tell the element that it should have the same text decoration as its parent.

Answer 2

The default value for text-decoration is none, so you need to specify a value if you want it to be different. Use inherit to use the parent's value:

#outer > div { text-decoration: inherit; }

or adapt the css for #inner to include text-decoration: inherit;:

#inner { background: pink; display: inline-block; text-decoration: inherit; }

---

Example

div{padding:10px;}
#outer{background:yellow;text-decoration: line-through;}
#inner{background:pink;display:inline-block; text-decoration: inherit; }

<div id=outer> 
  <div id=inner>
    This is the text 
  </div> 
</div>