css, um Brotkrumen zu entwerfen

Question

Ich habe folgenden HTML-Code, ich benutze Bootstrap, hier ist mein Breadcrumb sollte wie aussehen.

Ich habe erstellt jsfiddle dies stylen, überprüfen Sie bitte es here

Hier ist mein HTML-Code

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

Hier mein css ist

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

ich nicht bin immer wie man diese Pfeile zwischen Zahl und Text erzeugt. Irgendwelche Hilfe Vorschläge?

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>