这篇文章主要介绍了纯css实现设置半个字符的样式,分别实现了水平和垂直一半、水平和垂直三分之一等效果,需要的朋友可以参考下。

在stackoverflow上看到的问题怎么给半个字符设置样式，很多大神给出了答案。我就等就来学习围观吧。

一：基本解决方案：

html:

代码如下:

x

y

z

a

css:

代码如下:

.halfstyle{

position:relative;

display:inline-block;

font-size:80px;/*oranyfontsizewillwork*/

color:black;/*ortransparent,anycolor*/

overflow:hidden;

white-space:pre;/*topreservethespacesfromcollapsing*/

}

.halfstyle:before{

display:block;

z-index:1;

position:absolute;

top:0;

left:0;

width:50%;

content:attr(data-content);/*dynamiccontentforthepseudoelement*/

overflow:hidden;

color:#f00;

}

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

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

单个字符的实现：

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

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

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

二：左右开弓，两边都设置样式

更改css:

代码如下:

.halfstyle{

position:relative;

display:inline-block;

font-size:80px;/*oranyfontsizewillwork*/

color:transparent;/*hidethebasecharacter*/

overflow:hidden;

white-space:pre;/*topreservethespacesfromcollapsing*/

}

.halfstyle:before{/*createstheleftpart*/

display:block;

z-index:1;

position:absolute;

top:0;

width:50%;

content:attr(data-content);/*dynamiccontentforthepseudoelement*/

overflow:hidden;

pointer-events:none;/*sothebasecharisselectablebymouse*/

color:#f00;/*fordemopurposes*/

text-shadow:2px-2px0px#af0;/*fordemopurposes*/

}

.halfstyle:after{/*createstherightpart*/

display:block;

direction:rtl;/*veryimportant,willmakethewidthtostartfromright*/

position:absolute;

z-index:2;

top:0;

left:50%;

width:50%;

content:attr(data-content);/*dynamiccontentforthepseudoelement*/

overflow:hidden;

pointer-events:none;/*sothebasecharisselectablebymouse*/

color:#000;/*fordemopurposes*/

text-shadow:2px2px0px#0af;/*fordemopurposes*/

}

三：设置水平一半的样式

css:

代码如下:

.halfstyle{

position:relative;

display:inline-block;

font-size:80px;/*oranyfontsizewillwork*/

color:transparent;/*hidethebasecharacter*/

overflow:hidden;

white-space:pre;/*topreservethespacesfromcollapsing*/

}

.halfstyle:before{/*createsthetoppart*/

display:block;

z-index:2;

position:absolute;

top:0;

height:50%;

content:attr(data-content);/*dynamiccontentforthepseudoelement*/

overflow:hidden;

pointer-events:none;/*sothebasecharisselectablebymouse*/

color:#f00;/*fordemopurposes*/

text-shadow:2px-2px0px#af0;/*fordemopurposes*/

}

.halfstyle:after{/*createsthebottompart*/

display:block;

position:absolute;

z-index:1;

top:0;

height:100%;

content:attr(data-content);/*dynamiccontentforthepseudoelement*/

overflow:hidden;

pointer-events:none;/*sothebasecharisselectablebymouse*/

color:#000;/*fordemopurposes*/

text-shadow:2px2px0px#0af;/*fordemopurposes*/

}

四：水平三分之一的样式

css:

代码如下:

.halfstyle{/*basecharandalsothebottom1/3*/

position:relative;

display:inline-block;

font-size:80px;/*oranyfontsizewillwork*/

color:transparent;

overflow:hidden;

white-space:pre;/*topreservethespacesfromcollapsing*/

color:#f0f;

text-shadow:2px2px0px#0af;/*fordemopurposes*/

}

.halfstyle:before{/*createsthetop1/3*/

display:block;

z-index:2;

position:absolute;

top:0;

height:33.33%;

content:attr(data-content);/*dynamiccontentforthepseudoelement*/

overflow:hidden;

pointer-events:none;/*sothebasecharisselectablebymouse*/

color:#f00;/*fordemopurposes*/

text-shadow:2px-2px0px#fa0;/*fordemopurposes*/

}

.halfstyle:after{/*createsthemiddle1/3*/

display:block;

position:absolute;

z-index:1;

top:0;

height:66.66%;

content:attr(data-content);/*dynamiccontentforthepseudoelement*/

overflow:hidden;

pointer-events:none;/*sothebasecharisselectablebymouse*/

color:#000;/*fordemopurposes*/

text-shadow:2px2px0px#af0;/*fordemopurposes*/

}

五：垂直三分之的样式

css:

代码如下:

.halfstyle{/*basecharandalsotheright1/3*/

position:relative;

display:inline-block;

font-size:80px;/*oranyfontsizewillwork*/

color:transparent;/*hidethebasecharacter*/

overflow:hidden;

white-space:pre;/*topreservethespacesfromcollapsing*/

color:#f0f;/*fordemopurposes*/

text-shadow:2px2px0px#0af;/*fordemopurposes*/

}

.halfstyle:before{/*createstheleft1/3*/

display:block;

z-index:2;

position:absolute;

top:0;

width:33.33%;

content:attr(data-content);/*dynamiccontentforthepseudoelement*/

overflow:hidden;

pointer-events:none;/*sothebasecharisselectablebymouse*/

color:#f00;/*fordemopurposes*/

text-shadow:2px-2px0px#af0;/*fordemopurposes*/

}

.halfstyle:after{/*createsthemiddle1/3*/

display:block;

z-index:1;

position:absolute;

top:0;

width:66.66%;

content:attr(data-content);/*dynamiccontentforthepseudoelement*/

overflow:hidden;

pointer-events:none;/*sothebasecharisselectablebymouse*/

color:#000;/*fordemopurposes*/

text-shadow:2px2px0px#af0;/*fordemopurposes*/

}