pseudo classe :: prima - creare css cerchio

Sto cercando di creare il cerchio con i CSS, ma wan't di utilizzare classe pseudo :: primapseudo classe :: prima - creare css cerchio

Questo dovrebbe essere così (per l'elenco delle stazioni della metropolitana) :

.subway-item{ 
// css for text item going after circle 
} 
.subway-item::before{ 
    width:15px; 
    border-radius: 15px; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    background-color:#69b6d5; 
}

So che può essere eseguito con un elemento aggiuntivo prima del testo o con l'immagine. Ma vuoi sapere se è possibile utilizzare tali proprietà in :: prima

fonte

2015-02-27 Alex Veryutin

Sembra che abbiate dimenticato di specificare una proprietà 'content' .. se non ne viene specificato uno, lo pseudoelemento non viene generato. L'elemento è anche 'inline' di default, il che significa che dovrai impostare' display' su 'inline-block' se vuoi impostare le dimensioni su di esso .. Sembra che dovrai anche specificare un' height '. –

http://jsfiddle.net/cpgrscae/1/ Creato qui, forse puoi provare ad aiutare, questo dovrebbe essere anche con stili aggiuntivi per diversi colori –

Guarda questo esempio aggiornato - http://jsfiddle.net/rL5g0wxh/ –

È inoltre necessario impostare content, height e display per rendere effettivamente il rendering dell'elemento pseudo.

Esempio:

.subway-item::before{ 
    content: ''; 
    display: inline-block; 
    width: 15px; 
    height: 15px; 
    -moz-border-radius: 7.5px; 
    -webkit-border-radius: 7.5px; 
    border-radius: 7.5px; 
    background-color: #69b6d5; 
}

Nota: E 'meglio scrivere le proprietà specifiche del produttore prima la proprietà standard (border-radius nel tuo caso).

fonte

2015-02-27 20:16:13 aaronk6

questo non funzionerà, http://jsfiddle.net/cpgrscae/2/ –

@AlexVeryutin Dovrebbe ora, ho già cambiato 'block' in' inline-block' un paio di minuti fa, quando ho visto il tuo violino . – aaronk6

Sarebbe più logico impostare il raggio del bordo su metà della larghezza (o altezza). –

pseudo classe :: prima - creare css cerchio

risposta

Problemi correlati