Animacja rozciągnięcia dolnego obramowania

Cześć
Męczę się już od paru godzin z jednym efektem. Chodzi mi o rozciągnięcie dolnego obramowania. Tz. na moczątku mam 1px dolnego obramowania, następnie gdy wejdzie w :focus chciałbym aby obramowanie to zaczęła przykrywać 2px'lowa linia od lewej do prawej. Czy jest to możliwe przy użyciu tylko css czy trzeba jednak używać js'a który stworzy i rozciągnie dodatkowy element który przykryje wcześniejsze obramowanie?

Używasz do tego transition: https://developer.mozilla.org/en-US/docs/Web/CSS/transition
http://caniuse.com/#feat=css-transitions

Przykład (dałem 4px by było lepiej widoczne)
https://jsfiddle.net/mmb3v2cy/

To doskonale wiem, lech chodziło mi, tak jak pisałem, abe animacja była od lewej do prawej a nie od góry do dołu.

Ahh nie zrozumiałem do końca Twojej intencji.

Jedno z rozwiązań jakie mi przychodzi do głowy to animować :after, ale dla input'a :after nie działa, a z kolei dla diva nie ma :focus...

Ale można wykorzystać taki selector do animowania szerokości div'a:
input:focus+.underline

Przykład:
(edit: na przyszłość, rozwiązanie dzek69 poniżej jest zdecydowanie lepsze, korzystaj z jego wersji)
https://jsfiddle.net/p5Ld4kh1/

małym hackiem się da, samym inputem (bo zakładam, że chodzi o input skoro focus) już nie.
http://jsbin.com/liqekeluyu/edit?html,css,output

Dziękuję bardzo panowie :) Postaram się jeszcze pobawić z after aby nie dodawać tego span'a który dodam do nadrzędnego elementu.

@NickOver: aftera nie użyjesz z inputem, bo input nie ma "dzieci". Jest tylko on sam. Możesz za to zrobić diva z contentEditable (nie wiem za to czy da się wtedy ustawić tak, żeby tekstu nie dało się stylować skrótami klawiszowymi, być może trzeba będzie to blokować i robić jakiś strip html przed wysłaniem danych do serwera, dodatkowo trzeba javascriptem z diva wyciągać tekst w ogóle, kiedy input zadziała bez JS i jest bardziej "naturalny") - wtedy ::after będzie możliwy do użycia, ale .... Mija się to z celem. Nie wszystko da się zrobić z perfekcyjnym markupem :)

Nie chciałem dać after do inputa bo wiem że nie mogę, ale input ma swojego rodzica który to już by mógł coś podziałać. Po prostu zależy mi aby nie było żadnych dodatkowych elementów poza inputem i labelem.