CSS美化半个字符的巧妙方法

<span class="halfStyle" data-content="傥">傥</span>  
  
<hr/>  
<p>用脚本自动美化：</p>  
  
<span class="textToHalfStyle">恋爱容易婚姻不易，且行且珍惜。</span>  
  

需要做的就是将.halfStyleCSS类应用到每个需要半边美化的字符上。在上面的代码示例中，每个span里都包含了一个字符，我们在上面放置了data-属性，例如data-content="风"，之后在伪元素里我们使用了attr(data-content)方法，这样.halfStyle:before就会变得动态，不需要你手工的硬编码它们的内容。

对于多个字符需要美化的情况，我们可以创建一段jQuery代码自动将所有有.textToHalfStyleCSS类字符添加这种效果：

JavaScript Code复制内容到剪贴板

jQuery(function($) {   
    var text, chars, $el, i, output;   
  
    // 遍历所有字符   
    $(‘.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>’;