在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

來源

2014-09-24 gbvisconti

試試這個 - 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>

來源

2014-09-24 19:37:27 Anonymous

在div中的Css標記位置

回答

相關問題