盒陰影與選擇

Question

如何與::after

上alement添加新box-shadow作用，對最後一個元素後，我都希望外黑幀和白色內框

https://jsfiddle.net/6r4vpt0j/

<ul> 
    <li class="dropdown_calendar_li">test</li> 
    <li class="dropdown_calendar_li now">test</li> 
    <li class="dropdown_calendar_li selected">test</li> 
    <li class="dropdown_calendar_li now selected">test</li> 
</ul> 

ul { 
    list-style:none outside none; 
    margin:0; 
    padding:0; 
} 

.dropdown_calendar_li { 
    display:inline-block; 
    text-align:center; 
    padding:10px; 
    background:#aaa 
} 

.dropdown_calendar_li.now, 
.dropdown_calendar_li.now.selected { 
    box-shadow:0 0 0 2px #1f1f1f; 
} 

.dropdown_calendar_li.now.selected::after { 
    box-shadow:inset 0 0 0 2px #fff; 
} 

Answer 1

查看變化：

1. .dropdown_calendar_li需要position:relative;

使得

dropdown_calendar_li.now.selected::after可以處理position: absolute;

和

:after元件需要在這種情況下content: ''和一些display和size性能。

ul { 
 
    list-style:none outside none; 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 

 
.dropdown_calendar_li { 
 
    position: relative; 
 
\t display:inline-block; 
 
\t text-align:center; 
 
\t padding:10px; 
 
    background:#aaa 
 
} 
 

 
.dropdown_calendar_li.now, 
 
.dropdown_calendar_li.now.selected { 
 
\t box-shadow:0 0 0 2px #1f1f1f; 
 
} 
 

 
.dropdown_calendar_li.now.selected::after { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    content: ''; 
 
    width: 100%; 
 
    height: 40px; 
 
    display: block; 
 
    box-shadow:inset 0 0 0 2px red; 
 
}

<ul> 
 
    <li class="dropdown_calendar_li">test</li> 
 
    <li class="dropdown_calendar_li now">test</li> 
 
    <li class="dropdown_calendar_li selected">test</li> 
 
    <li class="dropdown_calendar_li now selected">test</li> 
 
</ul>

Answer 2

僞元素需要以最低content: ""。他們還需要像其他元素一樣的尺寸，否則他們將不會顯示。

在你的情況，你可以簡單地使用最後一個元素上的兩個盒子陰影和完全消除僞元素。

ul { 
 
    list-style:none outside none; 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 

 
.dropdown_calendar_li { 
 
\t display:inline-block; 
 
\t text-align:center; 
 
\t padding:10px; 
 
    background:#aaa 
 
} 
 

 
.dropdown_calendar_li.now { 
 
\t box-shadow:0 0 0 2px #1f1f1f; 
 
} 
 

 
.dropdown_calendar_li.now.selected { 
 
    box-shadow:0 0 0 2px #1f1f1f, inset 0 0 0 2px #fff; 
 
}

<ul> 
 
    <li class="dropdown_calendar_li">test</li> 
 
    <li class="dropdown_calendar_li now">test</li> 
 
    <li class="dropdown_calendar_li selected">test</li> 
 
    <li class="dropdown_calendar_li now selected">test</li> 
 
</ul>

Answer 3

對於::後，您需要添加內容：在CSS 「」。試試這個

.dropdown_calendar_li.now.selected::after { 
    content: ""; 
    box-shadow:inset 0 0 0 2px #fff; 
}