%fieldset
	%input#example{:type => "text"}
	%label{:for => "example"} Label
	%div
View Compiled
fieldset {
	position: relative;
	width: 100%;
	max-width: 200px;
	input, label {
		display: block;
		font-family: $f;
		font-size: 16px;
		line-height: 1.2;
	}
	label {
		transform-origin: center left;
		display: block;
		position: absolute;
		z-index: 0;
		left: 0;
		top: 0;
		width: 100%;
	}
	div {
		position: relative;
		border: 0;
		margin-top: $p/3;
		background-color: rgba($slate, .2);
		&, &:after {
			width: 100%;
			height: 2px;
			border-radius: 2px;
		}
		&:after {
			transform-origin: left center;
			transform: scaleX(0);
			content: "";
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			background: $slate;
		}
	}
	input {
		appearance: none;
		position: relative;
		z-index: 1;
		width: 100%;
		border: 0;
		margin: 0;
		padding: 0;
		background: none;
	}
}

External CSS

  1. https://fonts.googleapis.com/css?family=Libre+Franklin:100,200,300,400,500,600
  2. https://codepen.io/tutsplus/pen/598c614630b8b6882828b40d33bdbf3a

External JavaScript

This Pen doesn't use any external JavaScript resources.