How do I underline a form field a with vertical line at end

Question

I have seen many websites with the following design for their form:

How do you accomplish the vertical tick at the left end of the line? Is it a pseudo element, or some border hack, or am I completely missing something simple?

Answer 1

您可以使用::before伪元素来实现此目的。只需将文本框括在div中，然后将其高度设置为50％或尽可能少。您还必须使用top将div降低相同的高度。 padding对于在文本框的左侧显示div非常重要。

以下是代码和JSfiddle演示

HTML：

  <div>
    <input type="text" id="t1" placeholder="Your Name">
  </div>

CSS：

  #t1{
   position: relative;
   display: inline-block;
   border:0;
   border-bottom: 2px solid blue;
   text-align: right;
  }

 div{
  display: inline-block;
  position: relative;
  padding-left: 0.15em;
 }

 div::before {
  content: '';
  border-left: 2px solid blue;
  position: absolute;
  height: 50%;
  left: 0;
  top: 50%;
 }