Skip to content
Related Articles

Related Articles

Improve Article

How to set CSS style to half of a character ?

  • Last Updated : 27 Sep, 2019

The CSS style can be set to a character in vertically half or horizontally half both. Add a class on the text and the class contains CSS style to apply half of the character. The accessibility of the main text is preserved with screen readers for the blind or visually impaired.

You need to do the following things to apply CSS to half of a character:

  • Procedure to style half of a character or letter.
  • Procedure to style part of a character with CSS/JavaScript.
  • Procedure to apply CSS to 50% of a character
  • You Just need to apply the class .halfStyled to each element, which contains the character you want to be half-styled.

There are two popular ways to style half of a character.

  • Using HTML and CSS
  • Using HTM, CSS and jQuery

Example 1: This example uses HTML and CSS to style half of character.




<!DOCTYPE html>
<html>
  
<head>
    <title>Half Styled Character</title>
    <style type="text/css">
        .halfStyled {
            position: relative;
            font-size: 50px;
            display: inline-block;
            color: black;
            white-space: pre;
            overflow: hidden;
        }
          
        .halfStyled:before {
            display: block;
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            content: attr(data-content);
            height: 50%;
            overflow: hidden;
            color: green;
        }
    </style>
</head>
  
<body>
    <center>
        <span class="halfStyled" data-content="G">G</span>
        <span class="halfStyled" data-content="e">e</span>
        <span class="halfStyled" data-content="e">e</span>
        <span class="halfStyled" data-content="k">k</span>
        <span class="halfStyled" data-content="s">s</span>
        <span class="halfStyled" data-content="f">f</span>
        <span class="halfStyled" data-content="o">o</span>
        <span class="halfStyled" data-content="r">r</span>
        <span class="halfStyled" data-content="g">g</span>
        <span class="halfStyled" data-content="e">e</span>
        <span class="halfStyled" data-content="e">e</span>
        <span class="halfStyled" data-content="k">k</span>
        <span class="halfStyled" data-content="s">s</span>
        <h3>A Computer Science Portal for Geeks</h3>
    </center>
</body>
  
</html>

Output:

Example 2: This example uses HTML, CSS and jQuery to style half of character.




<!DOCTYPE html>
<html>
      
<head>
    <title>Half Styling Character</title>
      
    <script src=
    </script>
      
    <style type="text/css">
        .halfStyled {
            position: relative;
            display: inline-block;
            font-size: 80px;
            color: black; 
            overflow: hidden;
            white-space: pre; 
        }
   
        .halfStyled:before {
            display: block;
            z-index: 1;
            position: absolute;
            top: 0;
            left: 0;
            width: 50%;
            content: attr(data-content); 
            overflow: hidden;
            color: green;
        }
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <span class="geeks">GeeksforGeeks</span>
      
    <h3>A Computer Science Portal for Geeks</h3>
       
    <script type="text/javascript">
        jQuery(function($) {
            var text, chars, $el, i, output;
           
            // Iterate over all class occurences
            $('.geeks').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="halfStyled"'
                            + 'data-content="' + chars[i] + '">' 
                            + chars[i] + '</span>';
                }
               
                // Write to DOM only once
                $el.append(output);
            });
        });
    </script>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :