顯示在其他元素上的CSS

Question

我有一個效果，我試圖重現元素下的微妙陰影。

我有一個JSFiddle，說明了我想要完成的事情。

這一小段代碼會產生陰影，但足夠尷尬，它只會出現在選定的元素上，甚至會在窗口調整大小後出現在不同的元素上時進行調整。

.an-emotion::after { 
    content: ""; 
    display: block; 
    position: absolute; 
    bottom: 0; 
    height: 2px; 
    width: 0.7%; 
    left: -4%; 
    margin: 0 0 0 50%; 
    transform: rotateX(45deg) scale(10, .75); 
    background: #000; 
    box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000; 

Answer 1

你只需要1px的一個min-width你的CSS規則添加爲.an-emotion::after來解決這個問題。

所以只是將其更改爲

.an-emotion::after { 
    content: ""; 
    display: block; 
    position: absolute; 
    bottom: 0; 
    height: 2px; 
    width: 0.7%; 
    min-width:1px; /*add this line*/ 
    left: -4%; 
    margin: 0 0 0 50%; 
    transform: rotateX(45deg) scale(10, .75); 
    background: #000; 
    box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000; 
} 

這裏有一個例子：

.emotion-rows { 
 
    width: 100%; 
 
    position: relative; 
 
    margin-top: 30px; 
 
} 
 
.a-row { 
 
    padding: 0px 1%; 
 
    position: relative; 
 
    width: 99%; 
 
    height: 30px; 
 
    margin: 0px auto 10px; 
 
} 
 
.an-emotion { 
 
    height: 25px; 
 
    line-height: 28px; 
 
    text-align: center; 
 
    font-family: "Oriya"; 
 
    font-size: 15px; 
 
    width: 8.5%; 
 
    float: left; 
 
    margin: 0px 2px; 
 
    // box-shadow: inset 0px -1px 5px 4px rgba(0, 0, 80, 0.01); 
 
    background-color: rgba(27, 45, 115, 0.01); 
 
    transition: all 250ms linear; 
 
    position: relative; 
 
    top: 0; 
 
} 
 
.the-word { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
    top: 0; 
 
} 
 
.the-word:hover { 
 
    cursor: pointer; 
 
    transition: all 150ms linear; 
 
    top: -4px; 
 
} 
 
.an-emotion::after { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    bottom: 0; 
 
    height: 2px; 
 
    width: 0.7%; 
 
    min-width:1px; 
 
    left: -4%; 
 
    margin: 0 0 0 50%; 
 
    transform: rotateX(45deg) scale(10, .75); 
 
    background: #000; 
 
    box-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 5px #000, 0 0 5px #000, 0 0 5px #000, 0 0 7px #000, 0 0 12px #000; 
 
    opacity: 0.15; 
 
}

<div class="emotion-rows"> 
 
    <div class="a-row row1"> 
 
    <div class="an-emotion"> 
 
     <div class="the-word">JOY</div> 
 
    </div> 
 
    <div class="an-emotion"> 
 
     <div class="the-word">LIFE</div> 
 
    </div> 
 
    <div class="an-emotion"> 
 
     <div class="the-word">GIVING</div> 
 
    </div> 
 
    <div class="an-emotion"> 
 
     <div class="the-word">THINK</div> 
 
    </div> 
 
    <div class="an-emotion"> 
 
     <div class="the-word">RIGHT</div> 
 
    </div> 
 
    <div class="an-emotion"> 
 
     <div class="the-word">YES</div> 
 
    </div> 
 
    <div class="an-emotion"> 
 
     <div class="the-word">HI</div> 
 
    </div> 
 
    <div class="an-emotion"> 
 
     <div class="the-word">BEHAPPY</div> 
 
    </div> 
 
    <div class="an-emotion"> 
 
     <div class="the-word">LIFELESS</div> 
 
    </div> 
 
    <div class="an-emotion"> 
 
     <div class="the-word">NO</div> 
 
    </div> 
 
    <div class="an-emotion"> 
 
     <div class="the-word">AGAIN</div> 
 
    </div> 
 
    </div> 
 
    <div class="a-row row2"> 
 
    <div class="an-emotion"> 
 
     <div class="the-word">GIVING</div> 
 
    </div> 
 
    <div class="an-emotion"> 
 
     <div class="the-word">INSPIRATIONAL</div> 
 
    </div> 
 
    <div class="an-emotion"> 
 
     <div class="the-word">YEP</div> 
 
    </div> 
 
    <div class="an-emotion"> 
 
     <div class="the-word">LIFE</div> 
 
    </div> 
 
    <div class="an-emotion"> 
 
     <div class="the-word">HATE</div> 
 
    </div> 
 
    <div class="an-emotion"> 
 
     <div class="the-word">VICIOUS</div> 
 
    </div> 
 
    <div class="an-emotion"> 
 
     <div class="the-word">WATER</div> 
 
    </div> 
 
    <div class="an-emotion"> 
 
     <div class="the-word">RIGHTEOUS</div> 
 
    </div> 
 
    <div class="an-emotion"> 
 
     <div class="the-word">GIVING</div> 
 
    </div> 
 
    <div class="an-emotion"> 
 
     <div class="the-word">BROKEN</div> 
 
    </div> 
 
    <div class="an-emotion"> 
 
     <div class="the-word">INSPIRED</div> 
 
    </div> 
 
    </div> 
 
</div>