title: :before and :after selectors on internet explorer
body: <p>I have some css code that use :before and :after selectors:</p>
  
  <pre><code>.caption-wrap .line-3:before,
  .caption-wrap .line-3:after {
      content: " ";
      position: absolute;
      width: 50px;
      height: 5px;
      border-top: 1px solid #FFFFFF;
      border-bottom: 1px solid #FFFFFF;
  }
  .caption-wrap .line-3:before {
      margin: 7px 0 0 -60px;
  }
  .caption-wrap .line-3:after {
      margin: 7px 0 0 10px;
  }
  </code></pre>
  
  <p>The slide HTML markup:</p>
  
  <pre><code>&lt;li&gt;
      &lt;img src="images/mountains.jpg" class="parallax-bg" alt=""&gt;
      &lt;div class="overlay"&gt;&lt;/div&gt;
      &lt;div class="container hidden-xs"&gt;
          &lt;div class="caption-wrap"&gt;
              &lt;p class="line-1"&gt;we are&lt;/p&gt;
              &lt;h1 class="line-2 dashed-shadow"&gt;
                  MINIMAL&lt;/h1&gt;
                  &lt;h4 class="line-3"&gt;Design | Develpment | Success&lt;/h4&gt;
                  &lt;p class="line-5"&gt;
                      &lt;a href="#"&gt;codenpixel&lt;/a&gt;
                      &lt;a href="#"&gt;retrograde&lt;/a&gt;
                  &lt;/p&gt;
                  &lt;p class="line-6"&gt;2014&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>This look like this, on Chrome:
  <img src="https://i.stack.imgur.com/uzOin.jpg" alt="enter image description here"></p>
  
  <p>And internet explorer:
  <img src="https://i.stack.imgur.com/hX5bk.jpg" alt="enter image description here"></p>
  
  <p>On internet explorer developers tools all this css code is strikethrough, so I suppose that is being 
  ignored. Is there a way to make this css work in internet explorer?</p>
  
  <p>Website <a href="http://themescreators.com/t-one/" rel="noreferrer">link</a>.</p>