html - 输入转换

Question

我尝试为我的搜索按钮制作动画。
当您点击它时，它应该展开并滑到一边。
动画在css中没问题，但是搜索栏前面是一个div，没有跟着展开的搜索栏。

<form>
    <div class="test"></div>
    <input type="search" placeholder="Search">
</form>

form{
  float:right;
}

input[type=search] {
  background: #E75757 url(http://nerdlove.de/Blog/img/search_icon.svg) no-repeat 15px center;
    background-size: 25px;
  border: none;
  padding: 10px 10px 10px 10px;
  width: 35px;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
    text-indent:-999px;
}

input[type=search]:focus {
  width: 150px;
  background-position: -30px;
  text-indent: 0px;
}

.test{
    float:left;
}

.test:before{
    content: no-close-quote;
  border-top: 40px solid rgba(0, 0, 0, 0);
  border-left: 0px solid rgba(0, 0, 0, 0);
  border-right: 18px solid #E75757;
  float: right;
  right: 55px;
  position: absolute;
}

Example

我会将 :before 添加到输入中。但这在 css 中是不可能的。

编辑
HERE IS WHAT I WANT

Answer 1

只需将 .test 元素定位为 relative 并将 :before 定位到 right: 0;。

.test{
    float:left;
    position: relative;
}

.test:before{
    content: no-close-quote;
  border-top: 40px solid rgba(0, 0, 0, 0);
  border-left: 0px solid rgba(0, 0, 0, 0);
  border-right: 18px solid #E75757;
  float: right;
  right: 0;
  position: absolute;
}

Demo