纯CSS实现设置半个字符的样式


Posted in HTML / CSS onJuly 03, 2014

在stackoverflow上看到的问题怎么给半个字符设置样式,很多大神给出了答案。我就等就来学习围观吧。
一:基本解决方案:
html:

复制代码
代码如下:

<span class=”halfStyle” data-content=”X”>X</span>
<span class=”halfStyle” data-content=”Y”>Y</span>
<span class=”halfStyle” data-content=”Z”>Z</span>
<span class=”halfStyle” data-content=”A”>A</span>

css:
复制代码
代码如下:

.halfStyle {
position:relative;
display:inline-block;
font-size:80px; /* or any font size will work */
color: black; /* or transparent, any color */
overflow:hidden;
white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle:before {
display:block;
z-index:1;
position:absolute;
top:0;
left:0;
width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
color: #f00;
}

效果如图:

纯CSS实现设置半个字符的样式

这种方法用于任何动态文本或单个字符,并且都是自动适用的。所有你需要做的就是在目标文本上添加一个class,剩下的就解决了。

同时,保留了原文的可访问性,可以被盲人或视障人士使用的屏幕阅读器识别。

单个字符的实现:

纯CSS。所有你需要做的就是把.halfStyle class用在每个你想要渲染一半样式字符的元素上。

对于每个包含字符的span元素,你可以添加一个data属性,比如data-content=”X”,并且在伪元素上使用content:attr(data-content);这样,.halfStyle:before class将会是动态的,你不需要为每个实例进行硬编码

以下其它效果自行测试了。。。

二:左右开弓,两边都设置样式
更改CSS:

复制代码
代码如下:

.halfStyle {
position:relative;
display:inline-block;
font-size:80px; /* or any font size will work */
color: transparent; /* hide the base character */
overflow:hidden;
white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle:before { /* creates the left part */
display:block;
z-index:1;
position:absolute;
top:0;
width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #f00; /* for demo purposes */
text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}
.halfStyle:after { /* creates the right part */
display:block;
direction: rtl; /* very important, will make the width to start from right */
position:absolute;
z-index:2;
top:0;
left:50%;
width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #000; /* for demo purposes */
text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

三:设置水平一半的样式
CSS:
复制代码
代码如下:

.halfStyle {
position:relative;
display:inline-block;
font-size:80px; /* or any font size will work */
color: transparent; /* hide the base character */
overflow:hidden;
white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle:before { /* creates the top part */
display:block;
z-index:2;
position:absolute;
top:0;
height: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #f00; /* for demo purposes */
text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}
.halfStyle:after { /* creates the bottom part */
display:block;
position:absolute;
z-index:1;
top:0;
height: 100%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #000; /* for demo purposes */
text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}

四:水平三分之一的样式
css:
复制代码
代码如下:

.halfStyle { /* base char and also the bottom 1/3 */
position:relative;
display:inline-block;
font-size:80px; /* or any font size will work */
color: transparent;
overflow:hidden;
white-space: pre; /* to preserve the spaces from collapsing */
color: #f0f;
text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}
.halfStyle:before { /* creates the top 1/3 */
display:block;
z-index:2;
position:absolute;
top:0;
height: 33.33%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #f00; /* for demo purposes */
text-shadow: 2px -2px 0px #fa0; /* for demo purposes */
}
.halfStyle:after { /* creates the middle 1/3 */
display:block;
position:absolute;
z-index:1;
top:0;
height: 66.66%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #000; /* for demo purposes */
text-shadow: 2px 2px 0px #af0; /* for demo purposes */
}

五:垂直三分之的样式
css:
复制代码
代码如下:

.halfStyle { /* base char and also the right 1/3 */
position:relative;
display:inline-block;
font-size:80px; /* or any font size will work */
color: transparent; /* hide the base character */
overflow:hidden;
white-space: pre; /* to preserve the spaces from collapsing */
color: #f0f; /* for demo purposes */
text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}
.halfStyle:before { /* creates the left 1/3 */
display:block;
z-index:2;
position:absolute;
top:0;
width: 33.33%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #f00; /* for demo purposes */
text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}
.halfStyle:after { /* creates the middle 1/3 */
display:block;
z-index:1;
position:absolute;
top:0;
width: 66.66%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #000; /* for demo purposes */
text-shadow: 2px 2px 0px #af0; /* for demo purposes */
}
HTML / CSS 相关文章推荐
使用CSS禁止textarea调整大小功能的方法
Mar 13 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
Oct 23 HTML / CSS
HTML5中的新元素介绍
Oct 17 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 HTML / CSS
html5绘制时钟动画
Dec 15 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
Feb 19 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 21 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 18 HTML / CSS
html,css,javascript是怎样变成页面的
May 07 HTML / CSS
CSS 实现磨砂玻璃(毛玻璃)效果样式
May 21 HTML / CSS
css3使网页、图片变成灰色兼容大多数浏览器
Jul 02 #HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 #HTML / CSS
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
Jun 11 #HTML / CSS
纯CSS3实现滚动的齿轮动画效果
Jun 05 #HTML / CSS
浅析几个CSS3常用功能的写法
Jun 05 #HTML / CSS
CSS3中利用animation属性创建雪花飘落特效
May 14 #HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 #HTML / CSS
You might like
php session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
javascript获取xml节点的最大值(实现代码)
2013/12/11 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
Python中字典和集合学习小结
2017/07/07 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
Python中dict和set的用法讲解
2019/03/28 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
机电专业毕业生求职信
2013/10/27 职场文书
酒店门卫岗位职责
2013/12/29 职场文书
离职证明标准格式
2014/09/15 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
运动会广播稿200字
2014/10/18 职场文书
财政局长个人总结
2015/03/04 职场文书
上诉状格式
2015/05/23 职场文书
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript
python playwright 自动等待和断言详解
2021/11/27 Python
电频谱管理的原则是什么
2022/02/18 无线电
CSS的calc函数用法小结
2022/06/25 HTML / CSS