How is ":after" element's height and width determined?

Question

Fixing an existing website at the moment. User reported the issue where a link wrapping an image actually wraps the whole parent div.

I have created an example here: http://jsfiddle.net/WW3bh/25913/

.img-span {
  display: block;
  width: 100%;
  /*position: relative;*/
}

.img-span:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: block;
  background-color: transparent;
  transition: all .3s ease
}

.img-span:hover:after {
  background: rgba(0, 154, 228, 0.6)
}

<div class="wrap">
  <h1>Test Page</h1>
  <div class="rich-text-editor">
    <div class="wrap">
      <p>
        and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing
        a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees,
        and but a few stray gleams steal into the inner s
      </p>
      <a href="http://google.com">
        <div class="image-wrap">
          <span class="img-span">
          <img alt="" src="http://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
        </span>
        </div>
      </a>
      <p>
        odo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla
        vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
        Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutr
      </p>
    </div>
  </div>
</div>

This ":after" part I don't fully understand. I know it creates pseudo-elements within the container, however don't understand the top/left/right/bottom.

Setting width and height to .image-wrap div will fix this issue, but that requires to always have a wrapper around the img tag.

I am hoping to find another way to create a layer that doesn't reply on the width and height of its parent, but the child.

Could anyone explain how height and width are calculated for the after area based on the above css code?

Edit

Understood now top/left/right/bottom is just to define width and height to 100% (why don't they just use width height 100%?)

Understood that the issue was that img-span have position: static, that's why img-span:after doesn't treat it as parent, instead went up to find parent. if img-span is set to relative position, the issue would be gone. Not an expert in CSS, would this cause any side effects?

~~Note: on my computer, the first few css lines in jsfiddle don't get applied to the html, is it a bug for me or for everyone?~~ Mislead by default Jsfiddle comment symbols in CSS "//" ...

Possible duplicate of [Using CSS :before and :after pseudo-elements with inline CSS?](http://stackoverflow.com/questions/14141374/using-css-before-and-after-pseudo-elements-with-inline-css) — ProllyGeek, Feb 10 '16 at 23:57
@ProllyGeek thanks for checking, but I don't think it is, this question is about combinations of pseudo-elements, top/right/left/bottom and position. — zhanke, Feb 11 '16 at 00:27

jperezov · Accepted Answer · 2016-02-10T23:54:26.750

5

.img-span:after creates a pseudo-element within the .img-span element.

The following CSS rules

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;

are stretching the :after pseudo-element to the width / height of its parent element.

.img-span may not be the parent element, as position: absolute is relative to the first parent element it encounters with either position: relative, position: absolute, or position: fixed.

edited Feb 10 '16 at 23:54

answered Feb 10 '16 at 23:52

jperezov

3,041
1
20
36

@Philip yeah I was just editing that in; thanks. – jperezov Feb 10 '16 at 23:54
Thanks! this answers my confusion around the top left right and bottom. I am trying to figure a fix atm. I think adding "position: relative" to img-span should fix this issue. What do you think? Does it have any side-affect? – zhanke Feb 11 '16 at 00:19
@zhankezk The only side-effect it has is that any children `img-span` has will be relative to it, and not its parent. That being said, just move any elements this would be a problem for outside of `img-span`. Otherwise, it should be fine. – jperezov Feb 11 '16 at 02:12

score 3 · Answer 2 · answered Feb 11 '16 at 00:00

The :after acts as a child element of the element it was added to. Having top, left, right and bottom equals to 0 is the same if you would have height: 100% and width: 100%. In you case you can set particular height and width to :after pseudo class. Hope this will help you :)

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100px; 
width: 100px;

score 0 · Answer 3 · answered Feb 10 '16 at 23:51

:after is a child of whatever it is attached to. It's height and width will be calculated relative to whatever it is after-ing. So in this case your after will be calculated relative to the height and width of .img-span and from there its height will be determined by the content contained inside of it.

How is ":after" element's height and width determined?

3 Answers3