<!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>
效果图：
相关推荐
css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪...
jQuery+CSS3网页表单元素美化代码是一款在原生HTML表单的基础上进行美化，并使用jQuery来制作label动画效果，通常用于美化联系方式表单。
html5 css3在线留言表单美化代码
以前我还是比较忽视这两个家伙的，今天第一次见到原来伪类的好处这么多，以后会多多推荐CSS3伪类实现的效果 使用方法： 1、将head中的CSS样式引入到你的网页中 2、在你需要变成标签的html处增加class = ...
CSS3选择器-- 伪元素选择器 伪元素选择器 01 伪元素选择器 所谓伪元素选择器，是针对CSS中已经定义好的伪元素使用的选择器。CSS中常用的伪元素选择器有:before伪元素选择器和:after伪元素选择器 :before选择器 :...
CSS按钮与伪元素
用伪元素:after实现分割线和气泡
CSS3选择器--链接伪类 链接伪类 01 链接伪类 定义超链接时，为了提高用户体验，经常需要为超链接指定不同的状态，使得超链接在点击前、点击后和鼠标悬停时的样式不同。 a:link a:visited a:hover a:active 链接伪类 ...
HTML5 CSS3实现3D感极强的彩色立体文字源码，这个效果超赞啊，这种三维风格我很喜欢，而且颜色很鲜艳，当然了，字符的颜色可以自己定义，具体请参见HTML演示文件，文字内容的自定义也很方便，在HTML中输入文字内容...
这是一款使用html5新的type属性制作的表单，并用纯css3来对表单进行美化的html5和css3表单样式美化插件。该表单美化插件美观大方，易于集成，十分实用。
CSS伪类集合集合了CSS2中所有的伪类
纯CSS3美化复选框和单选框按钮，用HTML5的CSS3技术美化网页上的Checkbox和Radiobox按钮，经过美化后，变得时尚多了，和默认风格完全不一样了，美化后的风格也是目前在手机上比较容易看到的效果，实现方法和具体代码...
无论是伪类还是伪元素，都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors 和 CSS Selector Level 3，两者都已经是推荐标准。
CSS伪元素实现3D按钮
CSS中的伪类，其中讲的很清楚，不懂的同学可以参考
html5+css3实现的表单美化效果，以及具有输入验证特效，此种特效在网站非常实用，需要此段代码的朋友们可以前来下载使用。
6.4 伪元素选择器 167 6.5 CSS 3新增的伪类选择器 176 6.6 在脚本中修改显示样式 195 6.7 本章小结 197 第7章 字体与文本相关属性 198 7.1 字体相关属性 199 7.2 CSS 3支持的颜色表示方法 205 7.3 文本相关...
css伪类 超链接 连接的用法 描述 link的样式说明
《精通HTML5 + CSS3+JavaScript网页设计》内容主要包括CSS3的基本语法和概念，设置文字、段落、图片、背景、表格、表单和菜单等网页元素的方法，以及CSS3滤镜的应用。重点介绍如何使用DlV+CSS3进行网页布局，注重...