title: Display:none Removing Pseudo-elements
body: <p>Hi I was answer this <a href="https://stackoverflow.com/q/26466949/2887133">question</a> and I notice an strange behavior</p>
  <h2>The Context</h2>
  <p>I have an HTML structure like this:</p>
  <pre><code>&lt;div class=&quot;btn&quot;&gt;
      Click me
  &lt;/div&gt;
  &lt;div class=&quot;element&quot;&gt;
      Div Box With Pseudo Element
  &lt;/div&gt;
  </code></pre>
  <p>And CSS <sup>Just the relevant</sup></p>
  <pre><code>.element {
      display:none;
  }
  .element:after {
      content:&quot; &quot;;
      display:block;
      width:0;
      background:black;
      transition:6s ease;
  }
  .element.clicked:after {
      width:100%;
  }
  </code></pre>
  <p>Where the <code>element</code> needs to be <code>display:none</code> and need to be show/hide when click the <code>btn</code> element. That works fine with Jquery and <code>fadeToggle</code>.</p>
  <p>Also I add a <code>class</code> to animate a pseudo-element with <code>transition</code> and <code>width</code>. Need to animate at the same time of the <code>fade</code> on the parent.</p>
  <h2>The problem</h2>
  <p>If you see this <a href="http://jsfiddle.net/857dxph1/1/" rel="nofollow noreferrer">FIDDLE</a>, you can notice at first click the expected behavior is the pseudo-element grows form <code>0</code> to <code>100%</code> but instead is <code>100%</code> without grow.</p>
  <p>If you click again then it's fine changing from <code>100%</code> to <code>0</code></p>
  <h2>Question</h2>
  <p>I notice whit the inspector that setting <code>display:none</code> to the element makes the pseudo-element disappear.</p>
  <p><img src="https://i.stack.imgur.com/rZ0sK.png" alt="enter image description here" /></p>
  <p>This causes the element can't be from <code>0</code> to <code>100%</code> since doesn't exist.</p>
  <p><strong>Anyone Knows How to stop that behavior or how to avoid the non-render of the element. I was wonder about the form pseudo-elements were rendered and If they need a Visible parent</strong></p>
  <p><em>This issue doesn't happen with <code>visibiliy</code> or <code>opacity</code> just with <code>display</code></em></p>