css 如何将：before和：after伪元素放置在彼此之上？

mxg2im7a 于 2023-04-01 发布在其他

关注(0)|答案(3)|浏览(230)

将一个伪元素直接放置在另一个伪元素之上的最佳方法是什么？
假设我想在这里的标签旁边显示一个花哨的“复选框”：

label:before {
  content: "\00a0";
  color: #FFF;
  height: 6px;
  width: 6px;
  display: inline-block;
}

label:after {
  content: "\00a0";
  height: 18px;
  width: 18px;
  display: inline-block;
  background: #ebd196;
  background-image: linear-gradient(top, #ebd196 4%, #e2b65d 5%, #ab8844 100%);
}

<input id="pretty"><label for="pretty">Label text</label>

伪元素的堆叠顺序是什么？：before出现在：after之下还是之上？哪个更适合做边框，哪个更适合做填充？
什么是应用于label，label：before & label：after的最佳定位？

css

来源：https://stackoverflow.com/questions/19415641/how-to-position-before-after-pseudo-elements-on-top-of-each-other

3条答案

按热度按时间

4si2a6ki1#

:before（或::before）被视为元素的第一个子元素，而:after（或::after）被视为最后一个子元素。因此，:after自然会覆盖:before。
https://developer.mozilla.org/en-US/docs/Web/CSS/::before
https://developer.mozilla.org/en-US/docs/Web/CSS/::after
我想确保它们对齐的最好方法是在label上使用position: relative;，在伪元素上使用position: absolute;，以及top，bottom等相同的值。
如果你想使用伪元素制作渐变边框，那么你可以这样做：

label {
    position: relative;
    display: inline-block;
    padding: 0 2px;
    margin: 2px;
}

label:before {
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: white;
}

label:after {
    content:"";
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: -2px;
    right: -2px;
    z-index: -2;
    background: linear-gradient(to bottom, #1e5799 13%, #efe22f 79%);
}

http://jsfiddle.net/QqzJg/
您可能会发现以下命令很有用：
http://css-tricks.com/examples/GradientBorder/

赞(0）回复(0）举报 2023-04-01

mrphzbgm2#

而不是位置，添加“垂直对齐：中间”到：after和：before。

label {}
label::before{vertical-align: middle;}
label::after {vertical-align: middle;}

赞(0）回复(0）举报 2023-04-01

agxfikkp3#

body {
    background-color: #333;
}

.cloud {
    margin: 0 auto;
    width: 400px;
    height: 130px;
    background: linear-gradient(white, skyblue);
    margin-top: 200px;
    border-radius: 100px;
    position: relative;
    z-index: auto;
}

.cloud::before {
    position: absolute;
    content: '';
    width: 180px;
    height: 180px;
    border-radius: 100px;
    background-color: #FFF;
    top: -82px;
    left: 160px;
    z-index: -1;
}

.cloud::after {
    position: absolute;
    content: '';
    width: 180px;
    height: 180px;
    border-radius: 100px;
    background-color: #FFF;
    top: -83px;
    left: 50px;
    z-index: -1;
}

<div class="cloud"></div>

赞(0）回复(0）举报 2023-04-01

我来回答

css 如何将：before和：after伪元素放置在彼此之上？

3条答案

相关问题

热门标签

最新问答