Giả sử tôi muốn trang trí liên kết đến các loại tệp nhất định bằng một hình ảnh. Tôi có thể tuyên bố các liên kết của tôi là

<a href='foo.pdf' class='pdflink'>A File!</a>

sau đó có CSS ​​như

.pdflink:after { content: url('/images/pdf.png') }

Bây giờ, điều này hoạt động rất tốt, trừ khi pdf.pngkhông phải là kích thước phù hợp cho văn bản liên kết của tôi.

Tôi muốn có thể nói với trình duyệt chia tỷ lệ :afterhình ảnh, nhưng tôi không thể tìm ra cú pháp đúng. Hay đây giống như hình nền, trong đó việc thay đổi kích thước là không thể?

ETA: Tôi đang nghiêng về a) thay đổi kích thước hình ảnh nguồn thành kích thước "đúng", phía máy chủ và / hoặc b) thay đổi đánh dấu để chỉ cung cấp nội tuyến thẻ IMG. Tôi đã cố gắng tránh cả hai điều đó nhưng có vẻ như chúng sẽ tương thích hơn là cố gắng làm mọi thứ hoàn toàn bằng CSS. Câu trả lời cho câu hỏi ban đầu của tôi có vẻ là "bạn có thể sắp xếp các làm điều đó, đôi khi".

Điều chỉnh background-sizeđược cho phép. Tuy nhiên, bạn vẫn cần chỉ định chiều rộng và chiều cao của khối.

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    display: inline-block;
    width: 10px; 
    height: 20px;
    content:"";
}

Xem Bảng tương thích đầy đủ tại MDN .

Lưu ý rằng :afterphần tử giả là một hộp, trong đó lần lượt chứa hình ảnh được tạo. Không có cách nào để tạo kiểu cho hình ảnh, nhưng bạn có thể tạo kiểu cho hộp.

Sau đây chỉ là một ý tưởng, và giải pháp ở trên là thực tế hơn.

.pdflink:after {
    content: url('/images/pdf.png');
    transform: scale(.5);
}

http://jsfiddle.net/Nwupm/

Hạn chế: bạn cần biết kích thước nội tại của hình ảnh và nó để lại cho bạn một số khoảng trắng mà tôi không thể thoát khỏi ATM.

Vì câu trả lời khác của tôi rõ ràng là không được hiểu rõ, đây là một nỗ lực thứ hai:

Có hai cách tiếp cận để trả lời câu hỏi.

Thực tế (chỉ cho tôi xem hình ảnh chết tiệt!)

Hãy quên :afterđi bộ chọn giả, và tìm kiếm một cái gì đó như

.pdflink {
    min-height: 20px;
    padding-right: 10px;
    background-position: right bottom;
    background-size: 10px 20px;
    background-repeat: no-repeat;
}

Lý thuyết

Câu hỏi là: Bạn có thể tạo kiểu cho nội dung không? Câu trả lời là: Không, bạn không thể. Đã có một cuộc thảo luận dài về danh sách gửi thư của W3C về vấn đề này, nhưng cho đến nay vẫn chưa có giải pháp nào.

Nội dung đã tạo được hiển thị vào hộp được tạo và bạn có thể tạo kiểu cho hộp đó, nhưng không phải là nội dung như vậy . Các trình duyệt khác nhau cho thấy hành vi rất khác nhau

#foo         {content: url("bar.jpg"); width: 42px; height:42px;}  
#foo::before {content: url("bar.jpg"); width: 42px; height:42px;}

Chrome thay đổi kích thước cái đầu tiên, nhưng sử dụng kích thước nội tại của hình ảnh cho hình ảnh thứ hai

firefox và tức là không hỗ trợ cái thứ nhất và sử dụng kích thước nội tại cho cái thứ hai

opera sử dụng kích thước nội tại cho cả hai trường hợp

(từ http://lists.w3.org/Archives/Public/www-style/2011Nov/0451.html )

Tương tự, các trình duyệt hiển thị kết quả rất khác nhau trên những thứ như http://jsfiddle.net/Nwupm/1/ , nơi có nhiều hơn một yếu tố được tạo. Hãy nhớ rằng CSS3 vẫn đang trong giai đoạn phát triển ban đầu và vấn đề này vẫn chưa được giải quyết.

Bạn nên sử dụng nền thay vì hình ảnh.

.pdflink:after {
  content: "";
  background-image:url(your-image-url.png);
  background-size: 100% 100%;
  display: inline-block;

  /*size of your image*/
  height: 25px;
  width:25px;

  /*if you want to change the position you can use margins or:*/
  position:relative;
  top:5px;

}

diplay: block; không có tác dụng

Positionin cũng hoạt động rất kỳ lạ với các cơ sở chính, vì vậy hãy cẩn thận

body:before{ 
    content:url(https://i.imgur.com/LJvMTyw.png);
    transform: scale(.3);
    position: fixed;
    left: 50%;
    top: -6%;
    background: white;
}

Đây là một giải pháp (làm việc) khác: chỉ cần thay đổi kích thước hình ảnh của bạn theo kích thước bạn muốn :)

.pdflink:after {
    display: block;
    width: 20px;
    height: 10px;
    content:url('/images/pdf.png');
}

bạn cần pdf.png là 20px * 10px để làm việc này. 20px / 10px trong css có ở đây để cung cấp kích thước của khối sao cho các phần tử đi sau khối không bị rối với hình ảnh

Đừng quên giữ một bản sao của hình ảnh thô ở kích thước ban đầu của nó

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    width: 10px; 
    height: 20px;
    padding-left: 10px;// equal to width of image.
    margin-left:5px;// to add some space for better look
    content:"";
}

Bạn có thể sử dụng zoomtài sản. Kiểm tra jsfiddle này

Bạn có thể thay đổi chiều cao hoặc chiều rộng của phần tử Before hoặc After như thế này:

.element:after {
  display: block;
  content: url('your-image.png');
  height: 50px; //add any value you need for height or width
  width: 50px;
}

Tôi đã sử dụng chiều rộng kiểm soát kích thước phông chữ này

.home_footer1::after {
color: transparent;
background-image: url('images/icon-mail.png');      
background-size: 100%;      
content: ".......................................";
font-size: 30pt;
}

Ngày nay với flexbox, bạn có thể đơn giản hóa rất nhiều mã của mình và chỉ điều chỉnh 1 tham số khi cần:

.pdflink:after {
    content: url('/images/pdf.png');
    display: inline-flex;
    width: 10px;
}

Bây giờ bạn có thể chỉ cần điều chỉnh chiều rộng của phần tử và chiều cao sẽ tự động điều chỉnh, tăng / giảm chiều rộng cho đến khi chiều cao của phần tử nằm ở số bạn cần.

content: "";
background-image: url("yourimage.jpg");
background-size: 30px, 30px;