［CSS］::after擬似要素のcontent:""に、attrを使ったHTML5の独自データ属性「data-」から動的に文字を取得します。サンプルでは、指定のテキストにhoverすると、content:""で読み込んだ文字列に対して、文字色を白、それぞれの背景色（red、green、blue）を付けて、元のテキストを上書きしています。

サンプルのhtmlソース

<div class = "centered">
	<h4> block要素</h4>
	<div class = "blk">
		<span class = "text red"
			  data-content = "&nbsp;Css&nbsp;">
			&nbsp;Css&nbsp;
		</span>
		<span class = "text green"
			  data-content = "&nbsp;Is&nbsp;">
			&nbsp;Is&nbsp;
		</span>
		<span class = "text blue"
			  data-content = "&nbsp;Awesome.&nbsp;">
			&nbsp;Awesome.&nbsp;
		</span>
	</div>
	<h4> inline-block要素</h4>
	<div>
		<span class = "text red"
			  data-content = "&nbsp;Css&nbsp;">
			&nbsp;Css&nbsp;
		</span>
		<span class = "text green"
			  data-content = "&nbsp;Is&nbsp;">
			&nbsp;Is&nbsp;
		</span>
		<span class = "text blue"
			  data-content = "&nbsp;Awesome.&nbsp;">
			&nbsp;Awesome.&nbsp;
		</span>
	</div>
</div>

サンプルのCSSソース

.centered{
	position:absolute;
	top:340px;
	left:50%;
	width:auto;
	transform:translate(-50%,-50%);
}
.text{
	font-size:28px;
	background:#efefef;
	padding:5px 0;
	position:relative;
	margin-top:5px;
	margin-right:5px;
	float:left;
}
.text:last-child{
	margin-right:0;
}
.blk .text{
	display:block;
	float:none;
	margin:0;
}
.text::after{
	background:rgb(33,33,33);
	content:attr(data-content);
	position:absolute;
	color:#fff;
	left:0px;
	top:0px;
	padding:inherit;
	width:0;
	transition: all 700ms cubic-bezier(0.51, 0.04, 0.12, 0.99);
	overflow:hidden;
	}
.text:hover::after{
	width:100%;
	visibility:visible;
	}
.text.red::after{
	background:rgb(250,56,56);
	}
.text.green::after{
	background:rgb(56,200,56);
	}
.text.blue::after{
	background:rgb(56,56,250);
	}