Width for :before pseudo-class content in IE10 not working

Question

I have :before content inside a div to which i have given a width of 40% , it works great in chrome, firefox but when I try it in IE10 it doesnt work.

Below is my code:

 *, *:before, *:after { box-sizing: border-box; } .Table-row { border: 0.5px solid #cccccc; } .Table-row-item { display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: -ms-flex; display: flex; -webkit-flex-flow: row nowrap; -moz-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-flex-grow: 1; -moz-flex-grow: 1; -ms-flex-grow: 1; flex-grow: 1; -webkit-flex-basis: 0; -moz-flex-basis: 0; -ms-flex-basis: 0; flex-basis: 0; word-wrap: break-word; word-break: break-word; -webkit-box-flex: 1; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; padding: 0.5em; } .Table-row-item:before { content: attr(data-header); width: 40%; font-weight: 700; } 

 <div class="head"> <div class="Table-row"> <div class="Table-row-item" data-header="First Name">Gyandeep</div> <div class="Table-row-item" data-header="Last Name">Singh</div> <div class="Table-row-item" data-header="Job Title">Software Engineer</div> </div> </div> 

Output in Chrome and firefox:

Output in IE10:

Answer 1

The ::before pseudo-element has, by default, display:inline so adding display:inline-block fixes this for IE10/11.

Edit: Thanks to @Alochi for explaining why it works in Chrome. The parent element is a flex-item which is blockified (ie the element's display type is changed to block because the parent is display:flex ).

Answer 2

See this answer to not use flex on IE10 yet

Here's a working example on IE10 :

See this fiddle

*,
*:before,
*:after {
  box-sizing: border-box;
}
.Table-row {
  border: 0.5px solid #cccccc;
}
.Table-row-item {
  word-wrap: break-word;
  word-break: break-word;
  padding: 0.5em;
}
.Table-row-item:before {
  content: attr(data-header);
  width: 40%;
  font-weight: 700;
  display: inline-block;
}