html - div中的CSS标记位置

Question

我创建了两个 div 来制作进度条。我想标记外部 div 部分位置(0、25%、50%、75% 和 100%)。标记将是一个向上的小箭头(图片为 gif)。

这是到目前为止的代码 html

<div style='height: 2px; width: 100%; border: solid 1px #000'>

    <div style='height: 2px; width: 30%; background-color: red; border-right: solid 1px #000;'></div>

</div>

这是我看到的

最终的 html 应该是这样的(我圈出了我想要的部分 %)

Answer 1

试试这个:

JSFiddle - DEMO

div:before {
    content:"^";
    position: absolute;
    left: 0px;
}
div:after {
    content:"^";
    position: absolute;
    left: 25%;
}
div > div:before {
    content:"^";
    position: absolute;
    left: 50%;
}
div > div:after {
    content:"^";
    position: absolute;
    left: 75%;
}
span:after {
    content:"^";
    position: absolute;
    right: 0px;
}

<div style='position: relative; height: 2px; width: 100%; border: solid 1px #000'>
    <div style='height: 2px; width: 30%; background-color: red; border-right: solid 1px #000;'>
        <span></span>
    </div>
</div>