css - 带后选择器的框阴影

Question

如何使用 ::after 在元素上添加新的 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;

这样

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

和

1. :after 元素在这种情况下需要一个 content: '' 和一些 display 和 size 属性。

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

.dropdown_calendar_li {
  position: relative;
	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 {
  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>