如果要想把一个文字的分成两半分别设置成不同的颜色,你是不是第一时间只想到通过PS来实现呢,不过有一个不好的地方就是图片会占用更多的资源。所以下面就给大家介绍一个通过CSS的伪类元素来美化文字的方法。
对一个文字进行美化
左右型美化
HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3伪类元素(::before|::after),文字进行美化</title> </head> <body> <div> <span data-text='库'>库</span> </div> </body> </html>
CSS代码
*{ padding: 0; margin: 0 } span{ position: relative; font-size: 12rem; color: #0099CC } span::before{ position: absolute; font-size: 12rem; color: #333; content: attr(data-text); white-space:nowrap; width: 50%; display: inline-block; overflow: hidden }
上下型美化
只需要把CSS代码里的width:50%修改成height:50%就可以了,思路是一样的。
对多个文字进行美化
左右型美化
这个其实跟单个字的左右型是一样的,你只需要在HTML代码里添加多行<span>标签包含的字就可以了。代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3伪类元素(::before|::after),多个文字美化</title> </head> <body> <div> <span data-text='云'>云</span> <span data-text='库'>库</span> <span data-text='网'>网</span> </div> </body> </html>
上下型
上下型有两种方法,一种跟例子3的代码差不多,只需要把width:50%修改成height:50%就可以了。还有一种方法,除了要把 width:50%修改成height:50%,还需要在一个<span>标签里添加多个文字,这种方法其实是最简单的。HTML代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3伪类元素,文字进行美化</title> </head> <body> <div> <span data-text='云库网'>云库网</span> </div> </body> </html>
动态文字美化
我们先从一个最简单的例子开始
HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3伪类元素,动态文字进行美化</title> </head> <body> <div> <span data-text='云库网'>云库网</span> </div> </body> </html>
CSS代码
*{ padding: 0; margin: 0 } span{ position: relative; font-size: 12rem; color: #0099CC } span::before{ position: absolute; font-size: 12rem; color: #333; content: attr(data-text); white-space:nowrap; height: 50%; display: inline-block; overflow: hidden; transition:1s ease-in-out 0s; } span:hover::before{ height: 0; }
在这里需要注意的是伪类的使用,当这两个伪类放在一起时:hover要放在:before之前,不然就没有效果了。上面这个例子是上下型的,左右型 的就可 以在这个例子稍微修改下代码就OK了,把span::before{}伪类元素里的height改成width和给这个伪类添加一个:hover{}样式 就行了,如果是左右型的,那么这里的:hover样式就得对应写成:hover{width:0}
还有一种就是左右上下一起来的我们只需要给上面这个例子中的span::before伪类选择器追加一个width:50%;span:hover::before伪类选择器也添加一个width:0;就可以了,这里的50%和0可以根据个人需要进行更改。
从上面的例子中我们可以看出用一个<span>元素把每个文字 包含起来会更方便,不管是左右型还是上下型都适用。对于上下型的话,就看你想用哪一种效果了。
要每个字单独出来的HTML代码如下
<div> <span data-text='云'>云</span> <span data-text='库'>库</span> <span data-text='网'>网</span> </div>
所有文字在一个<span>标签里HTML代码如下
<div> <span data-text='云库网'>云库网</span> </div>
但他们有一个共同点,那就是CSS样式不需要改动。
DEMO:http://sources.ikeepstudying.com/font-prettify/
原文:http://yunkus.com/article/css3/285.html
转自:使用CSS3伪类元素(::before|::after)对文字进行美化
相关推荐
伪元素实现tooltip,nav导航栏的炫酷效果以及计数器
前两天看文档看到选择器那块儿的时候,前面4个基本都能理解:.class,#id,element,element, element,但后面两个::after和::before(文档中说,分别表示在view 组件的后面和前面插入内容),表示有点没有理解。...
用伪元素:after实现分割线和气泡
众所周知::before与::after两个伪元素其实是CSS3中的内容,然而实际上在CSS2中就已经有了这两者的身影,只不过CSS2中是前面加一个冒号来表示(:before和:after)。今天主要讲讲这两个伪元素该如何使用。 一、与普通...
/* 常见伪元素: E::first-letter, 表示给元素中的第... E::after, 用于CSS渲染中向元素逻辑上的尾部添加内容,主要是用它开显示修饰的内容,比如元素左侧价格图标 E::selection 表示给鼠标选中的设置一个样式 */
CSS3选择器-- 伪元素选择器 伪元素选择器 01 伪元素选择器 所谓伪元素选择器,是针对CSS中已经定义好的伪元素使用的选择器。CSS中常用的伪元素选择器有:before伪元素选择器和:after伪元素选择器 :before选择器 :...
CSS伪元素(Pseudo Element):after与:before 估计大家很少用到这些 ,但是在技术飞速发展的现在,我觉得我们不能整天把时间浪费在兼容IE6上! 先看一下:after与:before甚模样: HTML中只有一个P标签,P里面有一行文字...
利用CSS伪元素 :before 和 :after 可以在文档前后插入内容而不改变文档原有结构,再配合 box-shadow 可以实现很炫的效果, 下面就展示三个例子: 1、利用 :before 和 :after 添加背景,比如给一段文字前后打引号...
本篇重点介绍CSS中的:befor、:after创建的伪元素几种使用场景,如填充文本、作为iconfont、进度线、时间线以及几何图形。 1. 介绍 1.1 说明 CSS中的:befor、:after都会创建一个伪元素,其中:befor创建的伪元素是所选...
本教程简单的介绍一下关于CSS伪类:before, :after详解,有需要了解的朋友可以参考一下下。 :before 伪元素在元素之前添加内容 这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地,这个伪元素是行内元素...
并且没有使用任何图片之类的东东,主要依靠CSS3代码中的::before ::after两个伪类 以前我还是比较忽视这两个家伙的,今天第一次见到原来伪类的好处这么多,以后会多多推荐CSS3伪类实现的效果 使用方法: 1...
莫要慌,实现方法有很大,今天懒人哥哥就教你一招如何用CSS3的伪类实现这个效果 关键在于CSS的伪类after中的content,它可以直接指定当前样式标签里的内容 废话不多说,仔细看代码你就懂啦(什么?你一点CSS基础...
而且CSS里不光有伪类,还有伪元素,比如::first-letter,:first-line,:before和:after。 本文中其它伪元素暂且不表,单说:after伪元素。 after顾名思义是在元素后面的意思,实质是在元素之后添加内容。 这个伪元素...
纯css3before和after伪元素结合animation鼠标悬停动画效果
伪类选择器:CSS中已经定义好的选择器,不能随便取名 常用的伪类选择器是使用在a元素上的几种,`如a:link|a:...CSS中有如下四种伪元素选择器:· first-line:为某个元素的第一行文字使用样式;· first-letter:为某个元
NULL 博文链接:https://onestopweb.iteye.com/blog/2259691
:before和:after伪元素在CSS中除了被用来添加元素、加小标、清浮动等,还有很多妙用之处,接下来我们就来看一两个CSS中:before和:after伪元素使用的奇技淫巧