0

I am working on the below code. Why am I not able to append pseudo ::after content to text input?

.input{
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
text-align:left;
    border-radius: 0px;
    outline: none !important;
    box-shadow: none !important;
    border-color: #555 !important;
    padding-top: 2px;
}
.input::after{
    content: url('https://api.iconify.design/ei:chevron-down.svg?height=16');
    vertical-align: -0.125em;
    position:absolute;
    width:30px;
    height:30px;
    background:red;
    top:120px;
    z-index:99999999999999999999;
}
<div class="container p-3">
<input class="input" type="text" />
  </div>
halfer
  • 19,824
  • 17
  • 99
  • 186
Behseini
  • 6,066
  • 23
  • 78
  • 125
  • Specifically, see the second highest score answer on the target duplicate. – TylerH Feb 12 '20 at 21:49
  • Also, I strongly urge you to use semantic values for `z-index`. In your example, `z-index` wouldn't even be needed, let alone the value you have (which might even be invalidly large, actually). Use `z-index: 2`, for example, if you only have one instance of `z-index` in your CSS. – TylerH Feb 12 '20 at 21:51

0 Answers0