使用：after将字体真棒图标添加到输入类型

Question

I am trying to use the :after CSS on an input field, but it does not work.

What am I doing wrong? Should I use another selector?

 ._ght{ width: 100%; display: inline-block; text-align: center; margin-top: 10px; } ._ght input[type="text"]{ width: 48%; line-height: 32px; font-size: 26px; border: solid 1px #94a6ae; } ._ght input:after{ font-family: FontAwesome; content: "\\f06e"; } 

 <div class="_ght"> <input type="text" name=""> </div> 

Example Here:

Answer 1

As @zgood wrote: :before and :after work with html elements only.

I would recommend using an extra span to display your icon after that input.

  <span class="addon"></span>

Without extra HTML add your icon to the :after element of your input container.

 ._ght{ width: 100%; display: inline-block; text-align: center; margin-top: 10px; } ._ght input[type="text"]{ width: 48%; line-height: 32px; font-size: 26px; margin-left: 10px; border: solid 1px #94a6ae; } ._ght:after{ font-family: FontAwesome; font-size: 25px; content: "\\f06e"; border: 1px solid grey; padding: 6px 4px 3px 4px; margin-left: -5px; } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="_ght"> <input type="text" name=""> </div> 

Answer 2

this should solve your problem.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
        search{
                float: left; width: 800px;
                margin-left: 220px
            }

            .search input[type=text]{
                padding: 10px;
                width: 600px;
                border-right: none;
                border: 1px solid #f1f1f1;
                float: left;
                border-bottom-left-radius: 5px;
                border-top-left-radius: 5px;
            }


            .search button[type=submit]{
                padding:9px 20px;
                border-left: none;
                float: left;
                border: 1px solid #f1f1f1;
                border-bottom-right-radius: 5px;
                border-top-right-radius: 5px;
                color: #888;
            }

 </style>


      <div class="search">
                <form id="search">
                    <input type="text" placeholder="Search for Products and Services"/>
                    <button type="submit">
                    <i class="fa fa-search" style="font-size: 18px;"></i>
                    </button>
                </form>
            </div>