title: Positioning elements with flexbox and :after
body: <p>On a site I'm working on I have a banner at the top of the page which is 300px tall, that contains the title of the page and an underline.</p>
  
  <p>This is the markup</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div id="banner"&gt;
          &lt;div class="jumbotron"&gt;
              &lt;div class="container"&gt;
                  &lt;h1&gt;Terms and conditions&lt;/h1&gt;
                  &lt;img class="center-block" src="assets/img/common/header-blue-underline.png" width="158" height="10" alt=""/&gt; 
              &lt;/div&gt;    
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="banner-nav"&gt;
          &lt;ul class="get-in-touch-links"&gt;
              &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>Which makes this (with styling)</p>
  
  <p><a href="https://i.stack.imgur.com/gUnh9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gUnh9.jpg" alt="enter image description here"></a></p>
  
  <p>To acheive this I have used margins to force spacing, which isn't very easy to maintain when titles get longer.</p>
  
  <p>I would rather use flexbox to align the text within the banner, so that the text will stay vertically central, regardless of the amount of content.</p>
  
  <p>For instance, I could apply a class like this to #banner</p>
  
  <pre><code>.flex{
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
  }
  </code></pre>
  
  <p>The issue is: the image does not naturally float under the text when using this method.</p>
  
  <p>So I tried:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div id="banner" class="flex"&gt;
  
        &lt;h1&gt;Nulla quis lo&lt;/h1&gt;
  
  
  
      &lt;/div&gt;
  
      &lt;div id="banner-nav"&gt;
          &lt;ul class="get-in-touch-links"&gt;
              &lt;li&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt; 
  &lt;/div&gt;
  
  #banner h1:after{
              content: url(assets/img/common/header-blue-underline.png);
          }
  </code></pre>
  
  <p>So that the underline is automatically placed under the h1 but it just sits next to the h1 element.</p>
  
  <p><a href="https://i.stack.imgur.com/KucHa.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KucHa.jpg" alt="enter image description here"></a></p>
  
  <p>Essentially I'm trying to stop bodging things and use modern standards to position things accurately.</p>