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

Question

I know I can do something like:

.container:after {
    content: url("../images/img.png");
    display: inline-block;
    width: 100%;
    height: auto;
}

Is there anyway I can achieve similar functionality without referencing to an image? What i need is pseudo element to change its height based on width of parent element (.container in example). Pretty similar to an image with width:100%; height: auto; Thanks a lot!

Any at all. I just need fixed proportions of the pseudo element. So that when the width of .container will change, the height of :after will change accordingly to some proportion. — Max Sixblade, Mar 15 '16 at 04:47
I mean if i use image in :after it has some proportions so the pseudo element will have it, but i don't really need an image. — Max Sixblade, Mar 15 '16 at 04:48
I need pseudo element to take full width of .container, and have some height that depends of container width. ie when container width is 100px - pseudo element height is 200px, when container width is 50px, pseudo element height should be 100px.. etc. — Max Sixblade, Mar 15 '16 at 04:59

score 1 · Accepted Answer · edited May 23 '17 at 12:23

1

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>

edited May 23 '17 at 12:23

Community

1
1

answered Mar 15 '16 at 05:08

BoltClock

700,868
160
1,392
1,356

1

How this addresses "pseudo element with height based on width of parent element" ? – c-smile Mar 15 '16 at 05:12
Funny thing, just last week I proposed addition of `height:width(100%)` feature at W3C styles: https://lists.w3.org/Archives/Public/www-style/2016Mar/0161.html – c-smile Mar 15 '16 at 05:15
@c-smile: The OP talks about proportions in the comments under the question. Also, I saw that thread - anything that proposes having a property value be based on another property value on the same element is bound to fail because someone is going to ask you how you expect `width: height(100%); height: width(100%)` to compute, where the two properties have a cyclic dependency on each other. – BoltClock Mar 15 '16 at 05:19
Well it's perfect! BoltClock, thanks man, you saved my day..Though it is still an image, i think we have no other options. Thanks a lot. c-smile if we set width of pseudo element to 100% that do the trick. We now have width of parent element and the proportions of image .. ie any proportions – Max Sixblade Mar 15 '16 at 05:20
@BoltClock Read my proposal there. `width: height(100%)` is not acceptable - will evaluate to `width: auto`. – c-smile Mar 15 '16 at 05:21
@BoltClock sorry I'm new here and can't upvote yet, the padding trick did the trick) Wish we'd have some clean tools in css inventary to achieve this. Thanks again! – Max Sixblade Mar 15 '16 at 05:41

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

1 Answers1