How to set CSS style to half of a character ?

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Half Styled Charecter</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>

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.