title: CSS Tooltip with Arrow in Center
body: <p>I would like to have the black arrow right in the center of the row <code>div</code> while also being at the bottom as it is now. Here is the <a href="http://jsfiddle.net/mKLJB/" rel="nofollow">JSFiddle</a>. Thank you.</p>
  
  <p>Sample code:</p>
  
  <pre><code>&lt;div class="row divisor"&gt;
      Text
      &lt;br /&gt;
      text
  &lt;/div&gt;
  
  
  .row {
      width: auto; }
      .row:before, .row:after {
          content: " ";
          display: table; }
  
  .row { position: relative; }
  
  .divisor {
      border-bottom: 1px solid #D8D8D8; }
  
  .divisor:before {
      content: " ";
      display: block;
      position: absolute;
      top: 100%;
      left: 5px;
      right: 5px;
      width: 0; 
      height: 0; 
      border-left: 40px solid transparent;
      border-right: 40px solid transparent;   
      border-top: 25px solid #000; 
  }
  </code></pre>