<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 CSS3伪类元素文字美化</title>
<style type="text/css">
*{padding: 0;margin: 0;}
span{position: relative;font-size: 5rem;color: #0099CC;}
span::before{position: absolute;font-size: 5rem;color: #333;content: attr(data-text);white-space:nowrap;width: 50%;display: inline-block;overflow: hidden}</style>
</head>
<body>
<div>
<span data-text='阅'>阅</span>
<span data-text='谁'>谁</span>
<span data-text='问'>问</span>
<span data-text='君'>君</span>
<span data-text='诵'>诵</span>
</div>
</body>
</html>
效果图：
