Can You Apply a Width to a :Before/:After Pseudo-Element (Content:Url(Image))

Can you apply a width to a :before/:after pseudo-element (content:url(image))?

You're not crazy: it is indeed not possible to change the dimensions of an image that is inserted using content, whether it's inserted with url(), image(), image-set(), element(), or a CSS gradient. The image is always rendered as is. This is known as replaced content, or a replaced element (except we're not talking about elements here).

However, since replaced elements can be resized using width and height as described in section 10 of the CSS2.1 spec, this raises the question of why the properties don't seem to apply here. The answer to this, it would seem, is that the properties do apply, but to the pseudo-element box instead — you can see this by giving your pseudo-element a background color. Rather than replacing the pseudo-element box itself, the image is rendered as a child of the pseudo-element box, and therefore cannot be styled at all (as it would require another pseudo-element which doesn't exist).

And that lends itself to another question: why doesn't it replace the pseudo-element box altogether? Unfortunately, CSS2.1 does not specify this behavior at all, so the implementation that was agreed on is to render the content as a child of the pseudo-element box instead:

CSS2.1 doesn't really clearly define the processing model of 'content' on ::before and ::after, but the informative examples in CSS 2.1, the fact that 'content' specifies a list of things, and the desire for consistency has led to UA behavior being the following: the 'content' property specifies a list of things that become children of the ::before or ::after box.

-Boris

Hopefully this will be further addressed in CSS Generated Content level 3, on which rewriting work has just begun.

In the meantime, if you want to be able to resize the :after pseudo-element and the image that's generated, you will need to apply it as a background image instead and — assuming browser support isn't an issue — use background-size along with width and height to scale it (based on the understanding that those properties apply to the pseudo-element box instead).

Can I change the height of an image in CSS :before/:after pseudo-elements?

Adjusting the background-size is permitted. You still need to specify width and height of the block, however.

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

See the full Compatibility Table at the MDN.

How to change the size of an image inserted with ::before or ::after peudo-element in CSS

Hi why dont you add your image as a background image and add the following

.smile::before{
  content: ' ';
  background-image: url(../../../../Pictures/Smilie.jpg);
  background-size:contain;
  height: 100px;
  width: 100px;
 }

How can I set size of css-content-image?

also, you could set the content to empty string and use a background image. Just alternatively...

.upper-menu .search-form::after {
  content: ' ';
  display: inline-block;
  position: absolute;
  background: #bada55 url("img_2x.png") no-repeat;
  background-size: contain;
  height: 10px;
  width: 10px;
  top: 5px;
  right: 22px;
}

An object with fixed sizes inside :before or :after pseudo element

From my answer to this related question:

In the meantime, if you want to be able to resize the :after pseudo-element and the image that's generated, you will need to apply it as a background image instead and — assuming browser support isn't an issue — use background-size along with width and height to scale it (based on the understanding that those properties apply to the pseudo-element box instead).

So, instead of

content: url("../images/img.png");

use

background-image: url("../images/img.png");
background-size: cover;

(or the shorthand, background: url("../images/img.png") 0 0 / cover)

As for scaling your pseudo-element proportionally, I think you should be able to accomplish this using the padding-bottom trick. For an image with a ratio of 1:2, padding-bottom: 200% seems to work in this example:

.container {  border: thick solid;  margin: 1em;}
.large.container { width: 100px; }.small.container { width: 50px; }
.container::after {  content: '';  display: block;  background: url(http://placehold.it/100x200) 0 0 / cover;  padding-bottom: 200%;}

<div class="large container"></div><div class="small container"></div>

a.infolink::before {
    content: '?';
    display: inline-block;
    background: blue;
    color: white;
    width: 20px;
    height: 20px;
}

<span>foo</span>

$('span').hover(function(){
    $(this).attr('data-content','bar');
});

span:after {
    content: attr(data-content) ' any other text you may want';
}

<span>foo</span>

$('span').hover(function(){
    $(this).addClass('change').attr('data-content','bar');
});

span.change:after {
    content: attr(data-content) ' any other text you may want';
}