css来设计面包屑

Question

我有以下的html代码，我使用bootstrap，这里是我的面包屑应该看起来像。

我创建的jsfiddle的风格这一点，请检查一下here

这里是我的html代码

<div class="container"> 
       <ol class="list-inline"> 
        <li class="done"> 
         <div class="border_progress"> 
         <span class="number">1</span> 
         <span class="text">Select your device to sell</span>       </div> 

        </li> 
        <li> 
         <span class="number">1</span> 
         <span class="text">Select your device to sell</span>       
        </li> 
        <li> 
        <span class="number">1</span> 
         <span class="text">Select your device to sell</span>       
        </li> 
       </ol> 
      </div> 

，这里是我的CSS

body { 
    margin: 10px; 
} 
.text, 
.number{ 
    color:white; 
    background:green; 
    padding: 5px; 
} 

我没有变如何在数字和文字之间创建这些箭头。任何帮助建议？

Answer 1

https://jsfiddle.net/4rubmwrw/1/

/* Latest compiled and minified CSS included as External Resource*/ 
 

 
/* Optional theme */ 
 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 

 
body { 
 
    margin: 10px; 
 
} 
 
.text, .number{ 
 
    color:white; 
 
    background:green; 
 
    padding: 5px; 
 
} 
 

 
.number:after{ 
 
\t content: ''; 
 
\t position: relative; 
 
\t display: inline-block; 
 
\t width: 0; 
 
\t height: 0; 
 
\t left: 4px; 
 
\t border-top: 8px solid transparent; 
 
\t border-left: 16px solid red; 
 
\t border-bottom: 8px solid transparent; 
 
}

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
       <ol class="list-inline"> 
 
        <li class="done"> 
 
         <div class="border_progress"> 
 
         <span class="number">1</span> 
 
         <span class="text">Select your device to sell</span>       </div> 
 
         
 
        </li> 
 
        <li> 
 
         <span class="number">1</span> 
 
         <span class="text">Select your device to sell</span>       
 
        </li> 
 
        <li> 
 
        <span class="number">1</span> 
 
         <span class="text">Select your device to sell</span>       
 
        </li> 
 
       </ol> 
 
      </div>