Triangolo CSS: prima dell'elemento

Question

Sto usando il bootstrap, cercando di fare in modo che un div abbia un triangolo CSS prima di esso.

http://jsfiddle.net/B2XvZ/11/

Ecco il mio non lavoro Codice:

.d:before { 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 10px 15px 10px 0; 
    border-color: transparent #dd4397 transparent transparent; 
} 

Il modo in cui mi piacerebbe farlo sembrare è che ci sia un triangolo rosa verso sinistra a destra prima del testo "questo ", senza spazi tra esso e il div. Ho provato a farlo anche fluttuando gli elementi, senza successo.

Answer 1

È necessario specificare la proprietà content.

Per il posizionamento, aggiungere position:relative al genitore e quindi posizionare assolutamente la freccia -15px a sinistra.

jsFiddle example

.d { 
    position:relative; 
} 

.d:before { 
    content:"\A"; 
    border-style: solid; 
    border-width: 10px 15px 10px 0; 
    border-color: transparent #dd4397 transparent transparent; 
    position: absolute; 
    left: -15px; 
} 

Answer 2

È necessario proprietà di contenuto e di alcuni altri

.d:before { 
    content: ''; 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 10px 15px 10px 0; 
    border-color: transparent #dd4397 transparent transparent; 
    display: inline-block; 
    vertical-align: middle; 
    margin-right: 5px; 
}