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

You can achieve this by using a ::before pseudo element. Just enclosed your textbox in a div and make its height 50% or as much less as you want. You will also have to use top to bring the div down by same amount of height you reduced. padding is essential to display the div at exactly left of textbox.

Here is the code and JSfiddle demo

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%;
 }