是否可以应用CSS一半字符？ [英] Is it possible to apply CSS to half of a character?

问题描述

我要查找的内容：

一种方式来为一个字符设置 HALF 。 （在这种情况下，一半的字母是透明的）

我目前搜索和尝试（没有运气）： >

• 为字符/字母的一半设置样式


• 使用CSS或JavaScript设置字符样式
• 
  
• 将CSS应用于字符的50％

获取。

是否存在CSS或JavaScript解决方案，或者我将不得不诉诸图像？

---

更新：

由于许多人问我为什么会想要一半字符的风格，这就是为什么。我的城市最近花了25万美元来为自己定义一个新的品牌。此 |

---

这适用于任何动态文本或单个字符，并且都是自动的。所有你需要做的是在目标文本上添加一个类，其余的被处理。

此外，原始文本的可访问性保留为屏幕阅读器盲人或视障者。

单个字符的说明：

CSS。所有你需要做的是将 .halfStyle 类应用到包含你想要半样式的字符的每个元素。

对于包含字符的每个span元素，您可以创建一个数据属性，例如 data-content =X code> content：attr（data-content）; 因此 .halfStyle：before 类将是动态的，

$ b

只需向包含文本的元素中添加 textToHalfStyle 类。

---

CSS：

  .halfStyle {
 position：relative ; 
 display：inline-block; 
 font-size：80px; / *或任何字体大小将工作* / 
 color：black; / *或透明，任何颜色* / 
 overflow：hidden; 
 white-space：pre; / *保留空格不折叠* / 
} 
 .halfStyle：before {
 display：block; 
 z-index：1; 
 position：absolute; 
 top：0; 
 left：0; 
 width：50％; 
 content：attr（data-content）; / *伪元素的动态内容* / 
 overflow：hidden; 
 color：＃f00; 
} 
  

HTML

 < p>单个字符：< / p& 
< span class =halfStyledata-content =X> X< / span> 
< span class =halfStyledata-content =Y> Y< / span> 
< span class =halfStyledata-content =Z> Z< / span> 
< span class =halfStyledata-content =A> A< / span> 
 
< hr /> 
< p>自动：< / p> 
 
< span class =textToHalfStyle>半样式。< / span> 
  

---

要使其自动化，只需添加<$ c

jQuery ：自动模式

：$ c> textToHalfStyle

  jQuery（function（$）{
 var text，chars，$ el，i，output; 
 $ b b //迭代所有类的出现
 $（'。textToHalfStyle'）每个（function（idx，el）{
 $ el = $（el）; 
 text = text（）; 
 chars = text.split（''）; 
 
 //设置屏幕阅读器文本
 $ el.html（'< span style = position：absolute！important; clip：rect（1px 1px 1px 1px）; clip：rect（1px，1px，1px，1px）;>'+ text +'< / span>'）; 
 
 //复制输出以附加
 output =''; 
 
 //迭代文本中的所有字符
 for（i = 0; i  //为每个字符创建一个样式元素并附加到容器
输出+ ='< span aria-hidden =trueclass =halfStyledata-content = '+ chars [i] +'>'+ chars [i] +'< / span>'; 
} 
 
 //只写一次
 $ el.append（output）; 
}）; 
}）; 
  

演示：

< pre class =lang-css prettyprint-override> .halfStyle {
position：relative;
display：inline-block;
font-size：80px; / *或任何字体大小将工作* /
color：transparent; / *隐藏基本字符* /
overflow：hidden;
white-space：pre; / *保留空格不折叠* /
}
.halfStyle：before {/ * created the left part * /
display：block;
z-index：1;
position：absolute;
top：0;
width：50％;
content：attr（data-content）; / *伪元素的动态内容* /
overflow：hidden;
pointer-events：none; / *所以基本字符可以通过鼠标选择* /
color：＃f00; / *用于演示目的* /
text-shadow：2px -2px 0px＃af0; / *用于演示目的* /
}
.halfStyle：after {/ * creating the right part * /
display：block;
direction：rtl; / *非常重要，会使宽度从右开始* /
position：absolute;
z-index：2;
top：0;
left：50％;
width：50％;
content：attr（data-content）; / *伪元素的动态内容* /
overflow：hidden;
pointer-events：none; / *所以基本字符可以通过鼠标选择* /
color：＃000; / *用于演示目的* /
text-shadow：2px 2px 0px＃0af; / *用于演示目的* /
}


---

< hr />

第3部分：混合匹配和改进

现在我们知道了什么是可能的，一些变化。

---

- 水平半部分

img src =https://i.stack.imgur.com/2eDaQ.pngalt =halfStyle - Horizo​​ntal Half Parts>

  .halfStyle {/ * base char和右1/3 * / 
 position：relative; 
 display：inline-block; 
 font-size：80px; / *或任何字体大小将工作* / 
 color：transparent; / *隐藏基本字符* / 
 overflow：hidden; 
 white-space：pre; / *保留空格不折叠* / 
 color：＃f0f; / *用于演示目的* / 
 text-shadow：2px 2px 0px＃0af; / *用于演示目的* / 
} 
 .halfStyle：before {/ * creating the left 1/3 * / 
 display：block; 
 z-index：2; 
 position：absolute; 
 top：0; 
 width：33.33％; 
 content：attr（data-content）; / *伪元素的动态内容* / 
 overflow：hidden; 
 pointer-events：none; / *所以基本字符可以通过鼠标选择* / 
 color：＃f00; / *用于演示目的* / 
 text-shadow：2px -2px 0px＃af0; / *用于演示目的* / 
} 
 .halfStyle：after {/ * creating the middle 1/3 * / 
 display：block; 
 z-index：1; 
 position：absolute; 
 top：0; 
 width：66.66％; 
 content：attr（data-content）; / *伪元素的动态内容* / 
 overflow：hidden; 
 pointer-events：none; / *所以基本字符可以通过鼠标选择* / 
 color：＃000; / *用于演示目的* / 
 text-shadow：2px 2px 0px＃af0; / *用于演示目的* / 
} 
  

---

---

- 水平1/3部分

  body {
 background-color：black; 
} 
 
 .textToHalfStyle {
 display：block; 
 margin：200px 0 0 0; 
 text-align：center; 
} 
 
 .halfStyle {
 font-family：'Libre Baskerville'，serif; 
 position：relative; 
 display：inline-block; 
 width：1; 
 font-size：70px; 
 color：black; 
 overflow：hidden; 
 white-space：pre; 
 text-shadow：1px 2px 0 white; 
} 
 .halfStyle：before {
 display：block; 
 z-index：1; 
 position：absolute; 
 top：0; 
 width：50％; 
 content：attr（data-content）; / *伪元素的动态内容* / 
 overflow：hidden; 
 color：white; 
} 
  

---

---

- 由@SamTremaine提供的HalfStyle的改进型

  jQuery（function（$）{
 var halfstyle_text，halfstyle_chars，$ halfstyle_el，halfstyle_i ，halfstyle_output，halfstyle_style; 
 
 //迭代所有类的出现
 $（'。textToHalfStyle'）。each（function（idx，halfstyle_el）{
 $ halfstyle_el = $ halfstyle_el）; 
 halfstyle_chars = halfstyle_text.split（''）; 
（''）; 
 halfstyle_style = $ halfstyle_el.data（'halfstyle'）; 
 halfstyle_text = $ halfstyle_el.text 
 //设置屏幕阅读器文本
 $ halfstyle_el.html（'< span style =position：absolute！important; clip：rect（1px 1px 1px 1px）; clip：rect 1px，1px，1px）;>'+ halfstyle_text +'< / span>'）; 
 
 //重置输出以追加
 halfstyle_output =''; 
 
 //迭代文本中的所有字符
 for（halfstyle_i = 0; halfstyle_i< halfstyle_chars.length; halfstyle_i ++）{
 //为每个字符创建一个样式元素并附加到容器
 halfstyle_output + ='< span aria-hidden =trueclass =halfStyle'+ halfstyle_style +'data-content ='+ halfstyle_chars [halfstyle_i] +'& halfstyle_chars [halfstyle_i] +'< / span>'; 
} 
 
 //只写一次
 $ halfstyle_el.append（halfstyle_output）; 
}）; 
}）; 
  

此外，CSS样式集的类定义匹配 [ - CustomClassName- ] > ，因此我们将有 .halfStyle。[ - CustomClassName - ]

  / * start half-style hs-base * / 
 .halfStyle.hs- base {
 position：relative; 
 display：inline-block; 
 font-size：80px; / *或任何字体大小将工作* / 
 overflow：hidden; 
 white-space：pre; / *保留空格不折叠* / 
 color：＃000; / *用于演示目的* / 
} 
 .halfStyle.hs-base：before {
 display：block; 
 z-index：1; 
 position：absolute; 
 top：0; 
 width：50％; 
 content：attr（data-content）; / *伪元素的动态内容* / 
 pointer-events：none; / *所以基本字符可以通过鼠标选择* / 
 overflow：hidden; 
 color：＃f00; / *用于演示目的* / 
} 
 / *结束半格式hs-base * / 
 
 / *开始半格式hs-horizo​​ntal-third * / 
 .halfStyle.hs-horizo​​ntal-third {/ * base char和底部1/3 * / 
 position：relative; 
 display：inline-block; 
 font-size：80px; / *或任何字体大小将工作* / 
 color：transparent; 
 overflow：hidden; 
 white-space：pre; / *保留空格不折叠* / 
 color：＃f0f; 
 text-shadow：2px 2px 0px＃0af; / *用于演示目的* / 
} 
 .halfStyle.hs-horizo​​ntal-third：before {/ * creating the top 1/3 * / 
 display：block; 
 z-index：2; 
 position：absolute; 
 top：0; 
 height：33.33％; 
 content：attr（data-content）; / *伪元素的动态内容* / 
 overflow：hidden; 
 pointer-events：none; / *所以基本字符可以通过鼠标选择* / 
 color：＃f00; / *为演示目的* / 
 text-shadow：2px -2px 0px＃fa0; / *用于演示目的* / 
} 
 .halfStyle.hs-horizo​​ntal-third：after {/ * creating the middle 1/3 * / 
 display：block; 
 position：absolute; 
 z-index：1; 
 top：0; 
 height：66.66％; 
 content：attr（data-content）; / *伪元素的动态内容* / 
 overflow：hidden; 
 pointer-events：none; / *所以基本字符可以通过鼠标选择* / 
 color：＃000; / *用于演示目的* / 
 text-shadow：2px 2px 0px＃af0; / *用于演示目的* / 
} 
 / * end half-style hs-horizo​​ntal-third * / 
 
 / *开始半样式hs-PeelingStyle，由用户SamTremaine on Stackoverflow.com * / 
 .halfStyle.hs-PeelingStyle {
 position：relative; 
 display：inline-block; 
 font-size：68px; 
 color：rgba（0，0，0，0.8）; 
 overflow：hidden; 
 white-space：pre; 
 transform：rotate（4deg）; 
 text-shadow：2px 1px 3px rgba（0，0，0，0.3）; 
} 
 .halfStyle.hs-PeelingStyle：before {/ * creating the left part * / 
 display：block; 
 z-index：1; 
 position：absolute; 
 top：-0.5px; 
 left：-3px; 
 width：100％; 
 content：attr（data-content）; 
 overflow：hidden; 
 pointer-events：none; 
 color：#FFF; 
 transform：rotate（-4deg）; 
 text-shadow：0px 0px 1px＃000; 
} 
 / * end half-style hs-PeelingStyle * / 
 
 / *开始半格式hs-KevinGranger，由用户KevinGranger对StackOverflow.com * / 
 .textToHalfStyle.hs-KevinGranger {
 display：block; 
 margin：200px 0 0 0; 
 text-align：center; 
} 
 
 .halfStyle.hs-KevinGranger {
 font-family：'Libre Baskerville'，serif; 
 position：relative; 
 display：inline-block; 
 width：1; 
 font-size：70px; 
 color：black; 
 overflow：hidden; 
 white-space：pre; 
 text-shadow：1px 2px 0 white; 
} 
 .halfStyle.hs-KevinGranger：before {
 display：block; 
 z-index：1; 
 position：absolute; 
 top：0; 
 width：50％; 
 content：attr（data-content）; / *伪元素的动态内容* / 
 overflow：hidden; 
 color：white; 
} 
 / * end half-style hs-KevinGranger 
  

HTML： / p>



 < p> 
< span class =textToHalfStyledata-halfstyle =hs-base>半样式。< / span> 
< / p> 
< p> 
< span class =textToHalfStyledata-halfstyle =hs-horizo​​ntal-third>半样式。< / span> 
< / p> 
< p> 
< span class =textToHalfStyledata-halfstyle =hs-PeelingStyle>半样式。< / span> 
< / p> 
< p style =background-color：＃000;> 
< span class =textToHalfStyledata-halfstyle =hs-KevinGranger>半样式。< / span> 
< / p> 
  





演示在同一页上的多个半样式。

What I am looking for:

A way to style one HALF of a character. (In this case, half the letter being transparent)

What I have currently searched for and tried (With no luck):

• Methods for styling half of a character/letter
• Styling part of a character with CSS or JavaScript
• Apply CSS to 50% of a character

Below is an example of what I am trying to obtain.

Does a CSS or JavaScript solution exist for this, or am I going to have to resort to images? I would prefer not to go the image route as this text will end up being generated dynamically.

---

UPDATE:

Since many have asked why I would ever want to style half of a character, this is why. My city had recently spent $250,000 to define a new "brand" for itself. This logo is what they came up with. Many people have complained about the simplicity and lack of creativity and continue to do so. My goal was to come up with this website as a joke. Type in 'Halifax' and you will see what I mean. :)

解决方案

Now on GitHub as a Plugin!

Feel free to fork and improve.

Demo | Download Zip | Half-Style.com (Redirects to GitHub)

---

• Pure CSS for a Single Character
• JavaScript used for automation accross text or multiple characters
• Preserves Text Accessibility for screen readers for the blind or visually impaired

Part1: Basic Solution

Demo: http://jsfiddle.net/pd9yB/817/

---

This works on any dynamic text, or a single character, and is all automated. All you need to do is add a class on the target text and the rest is taken care of.

Also, the accessibility of the original text is preserved for screen readers for the blind or visually impaired.

Explanation for a single character:

Pure CSS. All you need to do is to apply .halfStyle class to each element that contains the character you want to be half-styled.

For each span element containing the character, you can create a data attribute, for example here data-content="X", and on the pseudo element use content: attr(data-content); so the .halfStyle:before class will be dynamic and you won't need to hard code it for every instance.

Explanation for any text:

Simply add textToHalfStyle class to the element containing the text.

---

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;
}

HTML

<p>Single Characters:</p>
<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>

<hr/>
<p>Automated:</p>

<span class="textToHalfStyle">Half-style, please.</span>

---

To make it automated, simply add textToHalfStyle class to the element containing the text.

jQuery for automated mode:

jQuery(function($) {
    var text, chars, $el, i, output;

    // Iterate over all class occurences
    $('.textToHalfStyle').each(function(idx, el) {
        $el = $(el);
        text = $el.text();
        chars = text.split('');

        // Set the screen-reader text
        $el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>');

        // Reset output for appending
        output = '';

        // Iterate over all chars in the text
        for (i = 0; i < chars.length; i++) {
            // Create a styled element for each character and append to container
            output += '<span aria-hidden="true" class="halfStyle" data-content="' + chars[i] + '">' + chars[i] + '</span>';
        }

        // Write to DOM only once
        $el.append(output);
    });
});

Demo: http://jsfiddle.net/pd9yB/819/

---

Part2: Advanced solution - Independent left and right parts

With this solution you can style left and right parts, individually and independently.

Everything is the same, only more advanced CSS does the magic.

Demo: http://jsfiddle.net/pd9yB/819/

.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 */
}

---

---

Part3: Mix-Match and Improve

Now that we know what is possible, let's create some variations.

---

-Horizontal Half Parts

Demo

.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 */
}

---

---

-Vertical 1/3 Parts

Demo

.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 */
}

---

---

-Horizontal 1/3 Parts

Demo

.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 */
}

---

---

-HalfStyle Improvement By @KevinGranger

DEMO

body{
    background-color: black;
}

.textToHalfStyle{
    display:block;
    margin: 200px 0 0 0;
    text-align:center;
}

.halfStyle {
    font-family: 'Libre Baskerville', serif;
    position:relative;
    display:inline-block;
    width:1;
    font-size:70px;
    color: black;
    overflow:hidden;
    white-space: pre;
    text-shadow: 1px 2px 0 white;
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: white;
}

---

---

-PeelingStyle improvement of HalfStyle by @SamTremaine

Demo and on samtremaine.co.uk

.halfStyle {
    position: relative;
    display: inline-block;
    font-size: 68px;
    color: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    white-space: pre;
    transform: rotate(4deg);
    text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);
}
.halfStyle:before { /* creates the left part */
    display: block;
    z-index: 1;
    position: absolute;
    top: -0.5px;
    left: -3px;
    width: 100%;
    content: attr(data-content);
    overflow: hidden;
    pointer-events: none;
    color: #FFF;
    transform: rotate(-4deg);
    text-shadow: 0px 0px 1px #000;
}

---

---

Part4: Ready for Production

Customized different Half-Style style-sets can be used on desired elements on the same page. You can define multiple style-sets and tell the plugin which one to use.

The plugin uses data attribute data-halfstyle="[-CustomClassName-]" on the target .textToHalfStyle elements and makes all the necessary changes automatically.

So, simply on the element containing the text add textToHalfStyle class and data attribute data-halfstyle="[-CustomClassName-]". The plugin will do the rest of the job.

Demo of Multiple Half-Styles on the same page.

jQuery(function($) {
    var halfstyle_text, halfstyle_chars, $halfstyle_el, halfstyle_i, halfstyle_output, halfstyle_style;

    // Iterate over all class occurrences
    $('.textToHalfStyle').each(function(idx, halfstyle_el) {
        $halfstyle_el = $(halfstyle_el);
        halfstyle_style = $halfstyle_el.data('halfstyle');
        halfstyle_text = $halfstyle_el.text();
        halfstyle_chars = halfstyle_text.split('');

        // Set the screen-reader text
        $halfstyle_el.html('<span style="position: absolute !important;clip: rect(1px 1px 1px 1px);clip: rect(1px, 1px, 1px, 1px);">' + halfstyle_text + '</span>');

        // Reset output for appending
        halfstyle_output = '';

        // Iterate over all chars in the text
        for (halfstyle_i = 0; halfstyle_i < halfstyle_chars.length; halfstyle_i++) {
            // Create a styled element for each character and append to container
            halfstyle_output += '<span aria-hidden="true" class="halfStyle ' + halfstyle_style + '" data-content="' + halfstyle_chars[halfstyle_i] + '">' + halfstyle_chars[halfstyle_i] + '</span>';
        }

        // Write to DOM only once
        $halfstyle_el.append(halfstyle_output);
    });
});

Also the CSS style-sets' class definitions match the [-CustomClassName-] part mentioned above and is chained to .halfStyle, so we will have .halfStyle.[-CustomClassName-]

 /* start half-style hs-base */
 .halfStyle.hs-base {
    position:relative;
    display:inline-block;
    font-size:80px; /* or any font size will work */
    overflow:hidden;
    white-space: pre; /* to preserve the spaces from collapsing */
    color: #000; /* for demo purposes */
}
.halfStyle.hs-base:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    pointer-events: none; /* so the base char is selectable by mouse */
    overflow:hidden;
    color: #f00; /* for demo purposes */
}
 /* end half-style hs-base */

/* start half-style hs-horizontal-third */
.halfStyle.hs-horizontal-third { /* 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.hs-horizontal-third: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.hs-horizontal-third: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 */
}
/* end half-style hs-horizontal-third */

/* start half-style hs-PeelingStyle, by user SamTremaine on Stackoverflow.com */
.halfStyle.hs-PeelingStyle {
    position: relative;
    display: inline-block;
    font-size: 68px;
    color: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    white-space: pre;
    transform: rotate(4deg);
    text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.3);
}
.halfStyle.hs-PeelingStyle:before { /* creates the left part */
    display: block;
    z-index: 1;
    position: absolute;
    top: -0.5px;
    left: -3px;
    width: 100%;
    content: attr(data-content);
    overflow: hidden;
    pointer-events: none;
    color: #FFF;
    transform: rotate(-4deg);
    text-shadow: 0px 0px 1px #000;
}
/* end half-style hs-PeelingStyle */

/* start half-style hs-KevinGranger, by user KevinGranger on StackOverflow.com*/
.textToHalfStyle.hs-KevinGranger {
    display:block;
    margin: 200px 0 0 0;
    text-align:center;
}

.halfStyle.hs-KevinGranger {
    font-family: 'Libre Baskerville', serif;
    position:relative;
    display:inline-block;
    width:1;
    font-size:70px;
    color: black;
    overflow:hidden;
    white-space: pre;
    text-shadow: 1px 2px 0 white;
}
.halfStyle.hs-KevinGranger:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: white;
}
/* end half-style hs-KevinGranger

HTML:

<p>
    <span class="textToHalfStyle" data-halfstyle="hs-base">Half-style, please.</span>
</p>
<p>
    <span class="textToHalfStyle" data-halfstyle="hs-horizontal-third">Half-style, please.</span>
</p>
<p>
    <span class="textToHalfStyle" data-halfstyle="hs-PeelingStyle">Half-style, please.</span>
</p>
<p style="background-color:#000;">
    <span class="textToHalfStyle" data-halfstyle="hs-KevinGranger">Half-style, please.</span>
</p>

Demo of Multiple Half-Styles on the same page.

这篇关于是否可以应用CSS一半字符？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！