Каким образом сделать инпуты с рамкой до половины?

Question

[Алексей]

Здравствуйте. Нужно сделать подобные инпуты с прозрачным фоном и рамкой до половины
каким образом так сделать:

Answer 1

[AdNahim]

<div class="input">
    <input type="text" value="Имя..." />
</div>

.input input {
    font-size:20px;
    border:none;
    outline:none;
    background: transparent;
}
.input {
    border:none;
    display:inline-block;
    border-bottom:solid #333 2px;
}
.input:before, .input:after {
    content:" ";
    display: inline-block;
    vertical-align:bottom;
    height: 5px;
    width: 2px;
    background: #333;
}

Answer 2

[Николай]

codepen.io/anon/pen/KdwqVy

Answer 3

[Саша]

Пример
Можно использовать дополнительный элемент идущий после инпута.
Напомню, что псевдоэлементы не работают с элементами у которых нет закрывающего тега.

Answer 4

[Pretor DH]

<i><input type="text" value="enter text"></i>
CSS

i {
  position:relative;
  padding:.5em;
}
i:after {
  content:" "; 
  display:block;
  top:50%;
  bottom:0;
  width:100%;
  position:absolute;
  border: 2px solid #fff;
  border-top: none;
}