他のすべての要素に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

あなただけ.an-emotion::afterは、この問題を解決するためにあなたのCSSルールに1pxののmin-widthを追加する必要があります。

だから

.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>