CSS Tooltip with Arrow in Center

Question

I would like to have the black arrow right in the center of the row div while also being at the bottom as it is now. Here is the JSFiddle. Thank you.

Sample code:

<div class="row divisor">
    Text
    <br />
    text
</div>


.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; 
}

Answer 1

Change left: 50%; and margin-left: -40px;

.divisor:before {
    content: " ";
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    right: 5px;
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 25px solid #000;
    margin-left: -40px;
}

Look at http://jsfiddle.net/iamrmin/mKLJB/3/