html中after后面添加文字,使用CSS3伪类元素(::before|::after)对文字进行美化

如果要想把一个文字的分成两半分别设置成不同的颜色,你是不是第一时间只想到通过PS来实现呢,不过有一个不好的地方就是图片会占用更多的资源。所以下面就给大家介绍一个通过CSS的伪类元素来美化文字的方法。

对一个文字进行美化

左右型美化

HTML代码

CSS3伪类元素(::before|::after),文字进行美化

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%就可以了,思路是一样的。

1-15092Q5240N46.jpg使用CSS3伪类元素(::before|::after)对文字进行美化

对多个文字进行美化

左右型美化

这个其实跟单个字的左右型是一样的,你只需要在HTML代码里添加多行标签包含的字就可以了。代码如下

CSS3伪类元素(::before|::after),多个文字美化

上下型

上下型有两种方法,一种跟例子3的代码差不多,只需要把width:50%修改成height:50%就可以了。还有一种方法,除了要把 width:50%修改成height:50%,还需要在一个标签里添加多个文字,这种方法其实是最简单的。HTML代码如下

CSS3伪类元素,文字进行美化

云库网

1-15092Q53642M1.jpg使用CSS3伪类元素(::before|::after)对文字进行美化

动态文字美化

我们先从一个最简单的例子开始

HTML代码

CSS3伪类元素,动态文字进行美化

云库网

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可以根据个人需要进行更改。

从上面的例子中我们可以看出用一个元素把每个文字 包含起来会更方便,不管是左右型还是上下型都适用。对于上下型的话,就看你想用哪一种效果了。

要每个字单独出来的HTML代码如下

所有文字在一个标签里HTML代码如下

云库网

但他们有一个共同点,那就是CSS样式不需要改动。

cbd5a61765aed016a56103b68dcc8d51.gif

相关

Related Posts

13221055-d6855a0da5b346d390f73829ceda0931-150x150.png

推荐10款非常优秀的 HTML5 开发工具

HTML5 发展如火如荼,随着各大浏览器对 HTML5 技术支持的不断完善以及 HTML5 技术的不断成熟,未来 HTML5 必将改变我们创建 Web 应用程序的方式。今天这篇文章向大家推荐10款优秀的HTML5开发工具,帮助你更高效的编写…

超链接特效

这里提供了各种各样的超链接特性,有些是借助伪元素,有些是借助svg,有些是借助HTML5动画。用你的鼠标悬停在这些链接上,给你跟传统链接完全不一样的效果感觉。你需要使用现代浏览器,比如谷歌浏览器或火狐浏览器。   Demo:http://www.webhek.com/misc/link-style/

CSS发抖

在一个大型项目里我需要制作出抖动的效果。最初我使用的是普通的CSS。 当开发完成后,我发现了这个很酷的jQuery plugin(由@jackrugile开发)。 于是我就开始思考,我应该做出这个小的CSS project。   CSS发抖 DEMO  …

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值