El estilo CSS se puede establecer en un carácter en la mitad vertical o en la mitad horizontal de ambos. Agregue una clase en el texto y la clase contiene estilo CSS para aplicar la mitad del carácter. La accesibilidad del texto principal se conserva con lectores de pantalla para ciegos o deficientes visuales. Debe hacer lo siguiente para aplicar CSS a la mitad de un carácter:
- Procedimiento para dar estilo a la mitad de un carácter o letra.
- Procedimiento para dar estilo a parte de un personaje con CSS/JavaScript.
- Procedimiento para aplicar CSS al 50% de un personaje
- Solo necesita aplicar la clase .halfStyled a cada elemento, que contiene el carácter que desea que tenga medio estilo.
Hay dos formas populares de diseñar la mitad de un personaje.
- Usando HTML y CSS
- Usando HTM, CSS y jQuery
Ejemplo 1: este ejemplo usa HTML y CSS para diseñar la mitad del carácter.
html
<!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>
Salida: 
Ejemplo 2: Este ejemplo usa HTML, CSS y jQuery para diseñar la mitad del carácter.
html
<!DOCTYPE html>
<html>
<head>
<title>Half Styling Character</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</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 occurrences
$('.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>
Producción: 
Publicación traducida automáticamente
Artículo escrito por Chandu_Siddartha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA