::after
не работает.
input {
height: 50px;
display: block;
}
input:after {
position: absolute;
right: 0;
width: 27px;
height: 21px;
background: red;
content: '';
display: block;
}
<input type="text">
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществу::after
не работает.
input {
height: 50px;
display: block;
}
input:after {
position: absolute;
right: 0;
width: 27px;
height: 21px;
background: red;
content: '';
display: block;
}
<input type="text">
Псевдо-элементы :after
и :before
могут быть применимы только для элементов-контейнеров, потому что они рендерятся как дочерние элементы. input
элемент не является элементом-контейнером.
Необходимо создать контейнер для input
, и к этому контейнеру применять псевдо-элементы
Пример
.input-container {
display: inline-block;
vertical-align: top;
position: relative;
}
.input-container:after {
position: absolute;
top: 50%;
right: 0;
margin-top: -10.5px;
width: 27px;
height: 21px;
background: red;
content: '';
display: block;
pointer-events: none;
}
input {
height: 50px;
display: block;
}
<div class="input-container">
<input type="text">
</div>