Question

这可能是一个愚蠢的问题，但是我必须澄清这个事实。所以这是我的关注。我可以设置两个div元素的样式，如下所示。

.element-container{
    display: flex;
    position: relative;
    width: 300px;
    height: 100px;
}
.element{
    z-index:1;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: Transparent;
    background-repeat:no-repeat;
    border-radius: 20px;
    display: inline-block;
    border: 2px solid black;
}
.element-shadow{
    z-index: -1;
    top: 10%;
    left: 4%;
    border-radius: 20px;
    background-color: yellow;
    height: 100%;
    width: 100%;
    position: absolute;
}

<div class="element-container">
  <div class="element"></div>
  <div class="element-shadow"></div>
</div>

我的问题是我们可以使用:: after伪元素来做同样的事情。基本上，我们可以在DOM中渲染其他元素之后添加一个html元素（在创建shadow effect之后创建element，因此不必担心element的实际大小如果shadow element使用相同的样式但使用:: after伪元素创建时在某处使用它

@Telary的答案在问题（原始问题）的上部是可以接受的，但是现在它将我引向另一个问题，我曾尝试对<button>进行同样的操作，但未按预期工作。我在这里想念什么？下面的代码是我的新问题

.but{
    position: absolute;
    background-color: Transparent;
    background-repeat:no-repeat;
    cursor:pointer;
    outline:none;
    border-radius: 500px;
    display: inline-block;
    border: 2px solid black;
    color: black;
    font-size: 250%;
    padding: 20px 100px;
}
.but:after{
    content:'';
    z-index: -1;
    top: 8%;
    left: 3%;
    border-radius: 500px;
    display: inline-block;
    background-color: rgba(140,122,230,1);
    position: absolute;
}

<button class="but">GO</button>

是因为我删除了外部<div>元素？

Answer 1

您可以使用下面的代码来达到所需的效果：

   .element-container{
    display: flex;
    position:relative;
    width: 300px;
    height: 100px;
    z-index: 1;
}
.element{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: Transparent;
    background-repeat:no-repeat;
    border-radius: 20px;
    display: inline-block;
    border: 2px solid black;
}
.element:after{
    content:'';
    display: inline-block;
    top: 10%;
    left: 4%;
    border-radius: 20px;
    background-color: yellow;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -1;
}

<div class="element-container">
  <div class="element"></div>
</div>

您需要在“ .element”选择器中删除z-index，将其放置在“ shadow”层的顶部。

是否可以使用CSS :: after伪元素

1 个答案: