CSS/テキストhoverアクション

• 中央からアンダーライン
• 中央からアンダーラインpart2
• 左からアンダーライン
• 上下に左右からアンダーライン
• 文字が拡大
• 一瞬だけ拡大
• 一瞬だけ傾く
• １文字ずつ回転
• 縦に１回転
• ボーダー bottom 移動
• 右へ移動
あ
• 円とアンダーライン

#text1 span{
  color: #333;
  text-decoration: none;
  position: relative;
}
#text1 span:before, #text1 span:after {
  width: 0;
  content: '';
  position: absolute;
  bottom: 0;
  transition: 0.2s ease-out;
  border-bottom: solid 1px maroon;
}
#text1 span:before {
  left: 50%;
}
#text1 span:after {
  right: 50%;
}
#text1 span:hover:before, #text1 span:hover:after {
  width: 50%;
}
  	

#text2 span {
	color: #333;
	position: relative;
}
#text2 span:after {
	position: absolute;
	bottom: 0;
	left: 50%;
	content: "";
	width: 0;
	height: 1px;
	background-color :rgba(140,25,3,0.5);
	transition: 0.3s;
	transform: translate(-50%);
}
#text2 span:hover:after {
	width: 100%;
} 
  	

#text3 span{
	color: #333;
	position: relative;
	display: inline-block;
}
#text3 span:after {
	position: absolute;
	bottom: 0px;
	left: -5px;
	content: "";
	width: 0;
	height: 1px;
	transition: 0.3s;
	background-color: rgba(100,20,0,0.5);
}
#text3 span:hover:after {
	width: 103%;
}
  	

#text4 span {
	color: #333;
	position: relative;
	display: inline-block;
}
#text4 span:before, #text4 span:after {
	position: absolute;
	content: "";
	width: 0;
	height: 1px;
	background-color: rgba(120,40,10,0.5);
	transition: 0.3s;
}
#text4 span:before {
	top: 0;
	left: 0;
}
#text4 span:after {
	bottom: 0;
	right: 0;
}
#text4 span:hover:before, #text4 span:hover:after {
	width: 100%;
}
  	

#text5 span {
	color :#333;
	transition: 0.5s;
	display: inline-block;
	text-decoration: none;
}
#text5 span:hover {
	transform: scale(1.2);
}
  	

#text6 span{
	color: #333;
	display: inline-block;
}
#text6 span:hover {
	animation: zoom 0.2s;
}
@keyframes zoom {
	50% {transform: scale(1.1);}
	100% {transform: sclae(1);}
}
  	

#text7 span {
	color :#333;
	display: inline-block;
}
#text7 span:hover {
	animation: rotate 0.3s;
}
@keyframes rotate {
	50% {transform: rotate(15deg);}
	100% {transform: ratate(0deg);}
}
  	

#text8 a{
	color: #222;
}
#text8 a span {
	display: inline-block;
}
#text8 a:hover span {
	-webkit-transform: rotateY(360deg);
	transform: rotateY(360deg);
	transition: 0.5s;
}
#text8 a:hover span:nth-of-type(1) {
	-webkit-transition-delay: .02s;
	transition-delay: .02s;
}
#text8 a:hover span:nth-of-type(2) {
	-webkit-transition-delay: .04s;
	transition-delay: .04s;
}
#text8 a:hover span:nth-of-type(3) {
	-webkit-transition-delay: .06s;
	transition-delay: .06s;
}
#text8 a:hover span:nth-of-type(4) {
	-webkit-transition-delay: .08s;
	transition-delay: .08s;
}
#text8 a:hover span:nth-of-type(5) {
	-webkit-transition-delay: .10s;
	transition-delay: .10s;
}
#text8 a:hover span:nth-of-type(6) {
	-webkit-transition-delay: .12s;
	transition-delay: .12s;
}
#text8 a:hover span:nth-of-type(7) {
	-webkit-transition-delay: .14s;
	transition-delay: .14s;
}
  	

#text9 span{
	transition: 0.5s;
	display: inline-block;
}
#text9 span:hover {
	transform: rotateX(360deg);
}
  	

#text10 span.bb {
	border-bottom: 2px solid #ddd;
	padding: 5px;
	transition: 0.5s;
	font-size: 14px;
	cursor: pointer;
	margin: -2px;
}
#text10 span.bb:hover {
	border-bottom: 2px solid blue;
}
#text10 span#ing {
	border-bottom: 2px solid blue;
}
  	

.text11 {
	transition: 0.5s;
}
.text11:hover {
	padding-left: 10px;
	transition: 0.5s;
}
  	

.text12 span{
	position: relative;
	display: inline-block;
}
.text12 span:after {
	position: absolute;
	bottom: 0px;
	left: -5px;
	content: "";
	width: 0;
	height: 3px;
	transition: 0.5s;
	background-color: rgba(100,20,0,0.5);
}
.text12 span:hover:after {
	width: 105%;
	transition: 1.0s;
}
.text12 span:before {
	border: 2px solid rgba(100,20,0,0.5);
	width: 30px;
	height: 30px;
	margin: 0;
	position: absolute;
	bottom: 0;
	left: -15px;
	content: "";
	border-radius: 50%;
	transition: 0.5s;
}
.text12 span:hover:before {
	position: absolute;
	left: 95%;
	transition: 1.0s;
	background: rgba(100,20,0,0.5);
}