Как расположить псевдоэлементы :before и :after друг над другом?

Как лучше всего расположить один псевдоэлемент непосредственно поверх другого псевдоэлемента?

Допустим, я хочу, чтобы рядом с меткой здесь появился причудливый «флажок»:

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-, что лучше подходит для границы, а что для заполнения?

И какое позиционирование лучше всего применить к метке, метке: до и метке: после, чтобы получить правильное позиционирование?


html css pseudo-element
person Ila    schedule 16.10.2013    source источник

Ответы (2)


arrow_upward
31
arrow_downward

: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

Я полагаю, что лучший способ убедиться, что они совпадают, — это использовать position: relative; для label и 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/

person Ben Jackson    schedule 16.10.2013

arrow_upward
1
arrow_downward

Вместо положения добавьте «vertical-align: middle» к :after и :before.

label {}
label::before{vertical-align: middle;}
label::after {vertical-align: middle;}
person Cihangir    schedule 29.05.2018