箭头出边界

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

做几乎类似的事情

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

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

箭头出边界

Arrow out border

html

css

css-shapes