change word

css pseudo element animation, good for a form wher you can change the word inspiration: http://cdn1.tnwcdn.com/wp-content/blogs.dir/1/files/2016/02/image-1.gif

by John Doe

HTML

Hover over <a class="change" href="#" after-content="change"> this word <ul>  
<li>red</li>
<li>green</li>
<li>blue</li>
    </ul>
</a> to see the animation.

SCSS

body{
  font-family: arial;
  font-size: 12px;
  color: #252525;
}
a.change{
  color: #252525;
  border-bottom: 1px solid #0E73B8;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  display: inline-block;
  margin-top: 0px;
  margin-bottom: -4px;
  z-index: 5;
  ul{
    position: absolute;
    max-height: 0px;
    overflow: hidden;
    margin-top: 0;
    padding-left: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color: #0E73B8;
    border: 1px solid #0E73B8;
    width: 100%;
    transition: all 800ms ease-in-out;
    li{
      list-style-type: none;
      padding-left: 5px;
      &:hover{
        background-color: #0E73B8;
        color: #fff;
      }
    }
  }
  &.click ul{
    max-height: 500px;
  }
  &:after{
    z-index: 1;
    display: block;
    width: 100%;
    background-color: #0E73B8;
    content: attr(after-content);
    position: absolute;
    top: 100%;
    text-align: center;
    color: #fff;
  }
  &.click{
    overflow: visible;
  }
  &.click:after{
    top: 0;
  }
  &:hover{
    &:after{
      top: 0px;
      transition: all 300ms ease-in-out;
    }
  }
  
}

JavaScript

$(".change").click(function () {
	var elem = $(this);
	if (elem.hasClass("click")) {
			elem.removeClass("click");
	} else {
		elem.addClass("click");
	}
});

$(document).on("click", function() {
	$(".change").removeClass("click");
});

$(".change").on("click", function(event) {
		event.stopPropagation();
	});