Właściwy sposób pozycjonowania: przed pseudoelementami

Question

Jaki jest właściwy sposób umieszczania pseudoelementów, takich jak zdjęcia, pod pozycjami :before i :after? Robiłem wiele różnych rzeczy, ale żaden z nich nie wydaje się być bardzo eleganckimi rozwiązaniami.

To właśnie staram się robić:

To co zrobiłem:

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> 

I w zasadzie tylko obraz ma być dostosowane do tekstu. Czy jest inny sposób na zrobienie tego?

Byłoby idealnie, gdybym mógł po prostu użyć dopełnienia i marginesów na obrazie :before, a to jest z założeniem, że jest to, co robisz,. Ale z jakiegoś powodu to nie działa dla mnie. Mogę dodać dopełnienie i marginesy w poziomie, ale dopełnienie górne i dolne nic nie robi. Dlaczego tak się stało?

Answer 1

Spróbuj użyć background zamiast content i umieścić zastępczy w content: http://jsfiddle.net/7X7x2/1/

Answer 2

Jeśli chcesz tylko do położenia obrazu w pobliżu tekst, to prawdopodobnie trzeba pionową własność -align:

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

It mają następujące możliwe wartości: linia bazowa, sub, super, góra, tekst-góra, środek, dół, tekst-dno

wartości a są obliczane na podstawie pozycji tekstu z bieżącej linii tekstowej (Czytaj więcej w przykładzie).

Pełna baza: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

(Aby dodać spację przed tekst wystarczy użyć margin-right)

Answer 3

Można użyć następującego kodu, aby przenieść zawartość:

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

Answer 4

To było moje rozwiązanie, z najechaniem kursorem myszy:

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

Musisz zrobić position: relative to .read-more, a następnie możesz zmienić pozycję.

skrzypce

Answer 6

edytowany @Richard JP Le Guen tak, aby odpowiadała żądanej wersji nieco bardziej

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/