「：之後」元素的高度和寬度是如何確定的？

修復現有網站。用戶報告了包裝圖像的鏈接實際包裝整個父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代碼計算後區域的高度和寬度？

編輯

明白了，現在上/左/右/底部僅僅是定義的寬度和高度爲100％（爲什麼不乾脆用寬高100％？）

根據瞭解，問題是img-span有position：static，這就是爲什麼img-span：after不把它當作父級，而是去找父級。如果img-span設置爲相對位置，則問題將消失。不是CSS的專家，會造成任何副作用嗎？

~~注意：在我的計算機上，jsfiddle中的前幾個css行不會應用到html，這對我或所有人來說都是一個錯誤嗎？~~默認情況下，CSS中的Jsfiddle註釋符號「//」...

來源

2016-02-10 zhankezk

的可能的複製[使用CSS：前和：後內聯CSS僞元素（http://stackoverflow.com/questions/14141374/using-css-before後續僞元素與行內-css） – ProllyGeek

@ProllyGeek感謝檢查，但我不認爲這是問題，這個問題是關於僞元素的組合，頂部/右/左/底部和位置。 – zhankezk

@ProllyGeek啊！該死......謝謝！ – zhankezk

.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遇到第一個父元素。

來源

2016-02-10 23:52:04 jperezov

@菲利普是的，我只是在編輯它;謝謝。 – jperezov

謝謝！這回答了我對左上角和右下角的困惑。我試圖找出一個修復atm。我認爲向img-span添加「position：relative」應該可以解決這個問題。你怎麼看？它有沒有任何副作用？ – zhankezk

@zhankezk它唯一的副作用是任何兒童'img-span'都將與其相關，而不是其父親。話雖如此，只要移動任何元素，這將是'img-span'之外的問題。否則，它應該沒問題。 – jperezov

:after是任何附加的子項。它的高度和寬度將根據之後的任何值進行計算。因此，在這種情況下，您的之後將根據.img-span的高度和寬度進行計算，並且從那裏開始其高度將由其內包含的內容決定。

來源

2016-02-10 23:51:38

：作爲元素的子元素後，它被添加到。頂部，左側，右側和底部等於0是相同的，如果你有高度：100％和寬度：100％。在你的情況下，你可以設置特定的高度和寬度：在僞類之後。希望這將幫助你:)

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

來源

2016-02-11 00:00:20

「：之後」元素的高度和寬度是如何確定的？

回答

相關問題