在div中的Css标记位置

问题描述：

我创建了两个div来制作进度条。我想标记外部部分职位（0,25％，50％，75％和100％）。该标记将是一个向上的小箭头（图像是一个gif）。在div中的Css标记位置

下面的代码的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>

这是我看到

enter image description here

最终的HTML应该是这样的（我圈出部分％我想）

enter image description here

试试这个 - http://jsfiddle.net/6z9tk52w/ – Anonymous 2014-09-24 19:32:10

帮助！如果你回答我upvote并标记为有用 – gbvisconti 2014-09-24 19:35:46

答

试试这个：

的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>

在div中的Css标记位置

相关推荐