首页 文章

“：after”元素的高度和宽度如何确定？ [关闭]

提问于
浏览 次
0

目前修复现有网站 . 用户报告了包装图像的链接实际包装整个父div的问题 .

我在这里创建了一个例子：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>

这个“：之后”部分我并不完全明白 . 我知道它在容器中创建伪元素，但是不理解顶部/左/右/底部 .

将宽度和高度设置为.image-wrap div将解决此问题，但这需要始终在img标记周围包装 .

我希望找到另一种方法来创建一个不会回复其父级的宽度和高度的图层，而是子级 .

任何人都可以解释如何根据上面的css代码计算后区域的高度和宽度？

Edit

现在理解上/左/右/下只是将宽度和高度定义为100％（为什么它们不使用宽度高度100％？）

明白问题是img-span有位置：静态，这就是为什么img-span：after不把它当作父类，而是去找父母 . 如果将img-span设置为相对位置，问题就会消失 . 不是CSS的专家，这会导致任何副作用吗？

注意：在我的电脑上，jsfiddle中的前几个css行没有应用到html，这对我或每个人来说都是一个错误吗？误导默认Jsfiddle注释符号在CSS "//"中...

html css

3 回答

  • 2

    .img-span:after 在 .img-span 元素中创建一个伪元素 .

    以下CSS规则

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

    将 :after 伪元素拉伸到其父元素的宽度/高度 .

    .img-span 可能不是父元素，因为 position: absolute 相对于它遇到的第一个父元素 position: relative ， position: absolute 或 position: fixed .

    回复于
  • 2

    ：作为其添加元素的子元素 . 如果您有高度：100％和宽度：100％，则顶部，左侧，右侧和底部等于0是相同的 . 在您的情况下，您可以将特定的高度和宽度设置为：伪类后 . 希望对你有帮助 ：）

    position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100px; 
width: 100px;
    回复于
  • 0

    :after 是无论附属于什么的孩子 . 它的高度和宽度将根据其后的数据计算得出 . 所以在这种情况下，你的后期将相对于 .img-span 的高度和宽度进行计算，并且从那里开始，它的高度将由其中包含的内容决定 .

    回复于

相关问题