0

I thought of:

#parent:before{
  width: parent.height;
  height: prent.width;
}

or either

parent:before{
}

along a jQuery like  $('#parent:before').width($('#parent').height());
                     $('#parent:before').height($('#parent').width());

but they both are not allowed yet, it seems. Any suggestions?

Whimusical
  • 6,401
  • 11
  • 62
  • 105
  • 4
    You do know what :before does, right? https://developer.mozilla.org/en-US/docs/Web/CSS/::before – Kevin B Aug 13 '13 at 14:30
  • I already read suggested duplicate. But there is a big difference here. I don't need to arbitrarly and dynamically change the width. I only need to assign parent.height to it, does not matter if it's from start – Whimusical Aug 13 '13 at 14:34
  • There is no previous-sibling selector. http://stackoverflow.com/questions/1817792/css-previous-sibling-selector – Roy J Aug 13 '13 at 14:34
  • What is your incentive to close questions that way? I am asking for a concrete problem. Not to dynamically change a :before's width (which I already know I can't, I even wrote it in the very question...). Can you understand that maybe there is a solution for getting the property from parent form the beggining and this has nothing to do with duplicates at all? – Whimusical Aug 13 '13 at 14:38
  • 1
    @user1352530 Your question is not worded that way. All you can really do is set the height of the parent element and have the before/after height set to inherit: http://cssdeck.com/labs/vfre4puf – cimmanon Aug 13 '13 at 14:39
  • Yes I thought of that, it is a bit ugly. But I thought maybe there is some hidden css3 reserved word or something that did magic as miracle for me :'( – Whimusical Aug 13 '13 at 14:41
  • Anyway I don't understand this need to catalogize so much questions. They can be closely related, almost identical, or either share same solution, but maybe the question is slightly different, or the problem it addresses.. – Whimusical Aug 13 '13 at 14:45

1 Answers1

1

Updated method

Here is a way to do what was asked that is so simple that I overlooked it at first.

height: 100%;
width: 100%;
-webkit-transform: rotate(90deg) ;
-moz-transform: rotate(90deg) ;
-ms-transform: rotate(90deg) ;
-o-transform: rotate(90deg) ;
transform: rotate(90deg);

This works because the width and height are set before the element is transformed. transform-origin may be useful to help position this correctly.

If you need the content to be rotated correctly, you should be able to use text rotation.

Fiddle: http://jsfiddle.net/p4nLX/1/

Original answer

Well here is a way to transfer parent width to the height of the :before:

div {
    width: 300px;
    height: 100px;
    background-color: red;
}
div:before {
    content: '';
    display: block;
    padding-bottom: 100%;
    background-color: blue;
    width: 100px;
}

Percentage padding (and margin I think) are based on the width of the parent element.

Fiddle: http://jsfiddle.net/p4nLX/

Based on this answer: Target :before and :after pseudo-elements with jQuery you can use the jQuery plugin here: http://jquery.lukelutman.com/plugins/pseudo/jquery.pseudo.js to target pseudo elements. From a quick look it seems the plugin transfers the pseudo elements content into a <span> so it can be targeted as a pseudo element is not part of the DOM.

Community
  • 1
  • 1
Michael Lawton
  • 1,460
  • 1
  • 14
  • 25
  • Is this supposed to work in any browser? The before element is 3x as tall as its parent. – cimmanon Aug 13 '13 at 15:02
  • Yes, the before is supposed to be as tall as the parent is wide. – Michael Lawton Aug 13 '13 at 15:51
  • That doesn't seem very helpful if the OP wants the :before to be the same height as the parent. – cimmanon Aug 13 '13 at 15:54
  • The OP said he wanted to transfer unrelated attributes from the parent to the `:before`, in his example he tries to transfer the parent height the `:before`'s width and the parent width to the `:before`'s height. This example shows how to do one of those. – Michael Lawton Aug 13 '13 at 15:56
  • 1
    If he just wanted the `:before` to be the same height as the parent then `height: 100%; display: block;` would work. – Michael Lawton Aug 13 '13 at 15:57
  • Could it be possible apply to you solution in the other case? I mean reapproaching that "almost successful" workaround for inherting width (from parent's height) and assigning height manually? I tried with padding-left trying to do an analogy but it does not work. – Whimusical Aug 14 '13 at 15:34
  • No, that is because all percentage padding (and margin too I think) is based on the width of the parent element. But turns out there is another way, see my edited answer. – Michael Lawton Aug 14 '13 at 17:43