html - 带中心箭头的 CSS 工具提示

Question

我希望黑色箭头位于 div 行的正中央，同时也像现在一样位于底部。这是 JSFiddle .谢谢。

示例代码:

<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

更改 left: 50%; 和 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;
}

看http://jsfiddle.net/iamrmin/mKLJB/3/