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:

I don't understand the use of `before`, can't you do this with padding? I don't have IE 10 but you can try setting `flex-shrink` to 0 — Huangism, Mar 21 '16 at 15:32
This s a simplified use case in real use case, i do before under media query for smaller screens otherwise it behaves as a table. For which class should i put flex-shrink? — Gyandeep, Mar 21 '16 at 15:35
Put it on the element with the width, in your case that's the `before` psuedo element — Huangism, Mar 21 '16 at 15:36

andyb · Accepted Answer · 2016-03-21T16:29:39.483

3

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 (i.e. the element's display type is changed to block because the parent is display:flex).

edited Mar 21 '16 at 16:29

answered Mar 21 '16 at 15:36

andyb

43,435
12
121
150

1

Thanks a lot @andyb you saved my day. – Gyandeep Mar 21 '16 at 15:37
1

It'll be because the before pseudo-element will be treated as a flex-item in Chrome. Flex-items should be [blockified](https://www.w3.org/TR/css-display-3/#blockify) – Alohci Mar 21 '16 at 15:59
Very useful, thanks @Alohci. I have edited your explanation into the answer – andyb Mar 21 '16 at 16:30

score 0 · Answer 2 · edited May 23 '17 at 12:08

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;
}

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

2 Answers2