title: <hr> line with a arrow in between pointing up in css
body: <p>hr or div line with up arrow in between. similar to this (<a href="https://stackoverflow.com/questions/26472289/hr-line-with-a-arrow-in-between-pointing-down">Down arrow</a>)</p>
  
  <p>I had tried it. Looks like I am not able to move the arrow to correct position.</p>
  
  <p>My Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.hr {
      width:100%;
      height: 1px;
      background: #7F7F7F;
      position:relative;
      margin-top:15px;
  }
  div.hr:after {
      content:'';
      position: absolute;
      border-style: solid;
      border-width: 0 15px 15px;
      border-color: #FFFFFF transparent;
      display: block;
      width: 0;
      z-index: 1;
      top: 5px;
      left: 50%;
  }
  div.hr:before {
      content:'';
      position: absolute;
      border-style: solid;
      border-width: 0 15px 15px;
      border-color: #7F7F7F transparent;
      display: block;
      width: 0;
      z-index: 1;
      top: 4px;
      left: 50%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="hr"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>