這篇文章主要介紹了純css實(shí)現(xiàn)設(shè)置半個(gè)字符的樣式,分別實(shí)現(xiàn)了水平和垂直一半、水平和垂直三分之一等效果,需要的朋友可以參考下。
在stackoverflow上看到的問題怎么給半個(gè)字符設(shè)置樣式，很多大神給出了答案。我就等就來學(xué)習(xí)圍觀吧。
一：基本解決方案：
html:
代碼如下:
<spanclass=”halfstyle”data-content=”x”>x</span>
<spanclass=”halfstyle”data-content=”y”>y</span>
<spanclass=”halfstyle”data-content=”z”>z</span>
<spanclass=”halfstyle”data-content=”a”>a</span>
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;
}
這種方法用于任何動態(tài)文本或單個(gè)字符，并且都是自動適用的。所有你需要做的就是在目標(biāo)文本上添加一個(gè)class，剩下的就解決了。
同時(shí)，保留了原文的可訪問性，可以被盲人或視障人士使用的屏幕閱讀器識別。
單個(gè)字符的實(shí)現(xiàn)：
純css。所有你需要做的就是把.halfstyleclass用在每個(gè)你想要渲染一半樣式字符的元素上。
對于每個(gè)包含字符的span元素，你可以添加一個(gè)data屬性，比如data-content=”x”，并且在偽元素上使用content:attr(data-content)；這樣，.halfstyle:beforeclass將會是動態(tài)的，你不需要為每個(gè)實(shí)例進(jìn)行硬編碼
以下其它效果自行測試了。。
二：左右開弓，兩邊都設(shè)置樣式
更改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*/
}
三：設(shè)置水平一半的樣式
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*/
}