倾斜风格：nth-​​child（odd）:: after

Question

我在这里发现了类似的问题，like so但我不能让它适用于我的案例..

所以我有一个这样的清单..

  <ul class="list">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
  </ul>

我尝试做的是为列表中的每一秒添加一个::after，在这种情况下做一些事情用作背景

我试过的是这样做......

.list li:nth-child(odd)::after{
    height: 100%;
    width: 100%;
    content: '';
    background: linear-gradient(to right,#8CC63F, #128465);
    opacity: 0.7;
}

我这样做的原因是因为我希望背景透明而不是整个li元素

但我似乎无法让它发挥作用？

任何帮助将不胜感激

由于

Answer 1

您需要在after元素中使用绝对位置：

＆＃13;

＆＃13;

.list li:nth-child(odd) {
  position: relative;
}

.list li:nth-child(odd)::after {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  content: '';
  background: linear-gradient(to right, #8CC63F, #128465);
  opacity: 0.7;
}

＆＃13;

<ul class="list">
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3</li>
  <li>Option 4</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

但您也可以使用li颜色直接将渐变应用于rgba：

＆＃13;

＆＃13;

.list li:nth-child(odd) {
  background: linear-gradient(to right, rgba(140, 198, 63, 0.7), rgba(18, 132, 101, 0.7));
}

＆＃13;

<ul class="list">
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3</li>
  <li>Option 4</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

请使用以下css。它可能会解决您的问题

.list li:nth-child(odd)::after{
height: 100%;
width: 100%;
content: '';
background: linear-gradient(to right,#8CC63F, #128465);
opacity: 0.7;
display:inline-block;
position: absolute;
left: 0;
top: 0;

}