Cách thích hợp để định vị: trước các phần tử giả

Question

Cách thích hợp để đặt các vị trí :before và :after thành phần giả, như hình ảnh là gì? Tôi đã rối tung với một loạt các cách khác nhau, nhưng không ai trong số họ có vẻ như các giải pháp rất thanh lịch.

Đây là những gì tôi đang cố gắng để làm:

Đây là những gì tôi đã làm:

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> 

tôi về cơ bản chỉ muốn hình ảnh được liên kết với các văn bản. Có cách nào khác để làm điều đó không?

Sẽ thật hoàn hảo nếu tôi chỉ có thể sử dụng đệm và lề trên hình ảnh :before và đó là được cho là là những gì bạn làm. Nhưng vì lý do nào đó, điều đó đã không làm việc cho tôi. Tôi có thể thêm phần đệm và lề ngang, nhưng phần đệm trên và dưới không làm gì cả. Tại sao điều đó lại xảy ra?

Answer 1

Hãy thử sử dụng background thay vì content và đặt một giữ chỗ trong content: http://jsfiddle.net/7X7x2/1/

Answer 2

Nếu bạn muốn chỉ cho hình ảnh vị trí gần các văn bản, sau đó bạn có thể cần tài sản -align dọc:

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

Nó có các giá trị có thể sau: đường cơ sở, phụ, siêu, trên cùng, văn bản trên cùng, giữa, dưới cùng, văn bản dưới cùng

các giá trị được tính từ vị trí của văn bản từ dòng văn bản hiện tại (Đọc thêm trong ví dụ).

Full tham khảo: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

(Để thêm dấu cách trước văn bản chỉ cần sử dụng margin-right)

Answer 3

Bạn có thể sử dụng đoạn mã sau để di chuyển nội dung:

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

Answer 4

Đây là giải pháp của tôi, với một 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

Bạn cần phải thực hiện vị trí: liên quan đến .read-more và sau đó bạn có thể thay đổi vị trí.

fiddle

Answer 6

Edited @ Richard JP Le Guen để nó phù hợp với phiên bản được yêu cầu nhiều hơn một chút

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/