Modo corretto per posizionare: prima degli pseudo-elementi

Question

Qual è il modo corretto per posizionare gli pseudo-elementi :before e , come le immagini? Ho fatto un sacco di modi diversi, ma nessuno di loro sembra una soluzione molto elegante.

Questo è quello che sto cercando di fare:

Questo è quello che ho fatto:

div.read-more a:before { 
    content: url('/images/read_more_arrow_sm.png'); 
    position: absolute; 
    top: 4px; 
    left: -15px; 
} 

<div class="read-more"> 
    <a href="#">Read More</a> 
</div> 

Io fondamentalmente voglio solo l'immagine da essere allineato con il testo. C'è un altro modo per farlo?

Sarebbe perfetto se potessi usare solo padding e margini sull'immagine :before, e questo è supposto essere ciò che fai. Ma per qualche ragione, questo non ha funzionato per me. Posso aggiungere padding e margini orizzontali, ma il pad superiore e inferiore non fa nulla. Perché dovrebbe succedere?

Answer 1

Provare a utilizzare background invece di content e mettere un segnaposto in content: http://jsfiddle.net/7X7x2/1/

Answer 2

Se volete un'immagine posizione solo accanto al testo, allora probabilmente avete bisogno verticale proprietà -align:

div.read-more a:before { 
    vertical-align: bottom; 
    content: url(image.png); 
} 

E ' avere seguenti valori possibili: baseline, sub, super, top, text-top, middle, bottom, text-bottom

Questo calcola un valore calcolato dalla posizione del testo dalla riga di testo corrente (leggi di più nell'esempio).

di riferimento completa: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

(Per aggiungere spazio prima del testo basta usare margin-right)

Answer 3

È possibile utilizzare il seguente codice al fine di spostare il contenuto:

div.read-more a:before { 
    content: "\00BB \0020"; 
    position: relative; 
    top: -2px; 
} 

Answer 4

Questo è stato la mia soluzione, con un mouseover:

div.read-more a:before { 
    content: url(image.png); 
    position: relative; 
    top: 3px; 
    left: -7px; 
    padding-left: 7px; 
} 
div.read-more a:hover:before { 
    content: url(image_hover.png); 
} 

Answer 5

È necessario effettuare posizione: relativa a .read-more e quindi puoi cambiare posizione.

violino

Answer 6

cura @pluto JP Le di Guen in modo che corrisponda la versione richiesto un po 'più

HTML

<div class="read-more"> 
    <a href="#">Read More</a> 
</div> 

CSS

div.read-more a:before { 
    background: url('http://i.stack.imgur.com/XyerX.jpg') CENTER CENTER NO-REPEAT; 
    content:""; 
    width:21px; 
    height:21px; 
    display: inline-block; 
    vertical-align: sub; 
    margin-right: 4px; 
    line-height: 21px; 
} 
div.read-more { 
    background: red; 
    line-height: 21px; 
    display:block; 
    vertical-align:middle; 
    width: max-content; 
    padding: 4px; 
} 
div.read-more a{ 
    color: white; 
    text-decoration:none; 
} 

http://jsfiddle.net/7X7x2/688/