向外箭头

Question

所以我有一个看起来像这样的页面：

但我希望线条像箭头一样：

这可以吗???

我目前的css：

#show_length{
    border-bottom: 2px solid black;
    width: 99%;
}

#show_length2{
    border-bottom: 2px solid black;
    width: 20%;
}

和

<div id="show_length">25m</div>
<div id="show_length2">2.5m</div>

Answer 1

您可以使用pseudo-elements

执行类似的操作

＆＃13;

＆＃13;

#show_length{
    border-bottom: 2px solid black;
    width: 300px;
}
#show_length:after{
    content:">";
    position:absolute;
    font-weight:bold;
    margin-left:265px;
    margin-top:2px;
    font-size:30px;
}

#show_length2{
    border-bottom: 2px solid black;
    width: 100px;
}

＆＃13;

<div id="show_length">25m</div>
<div id="show_length2">2.5m</div>

＆＃13;

＆＃13;

＆＃13;