I want to use CSS for a half character ? How can i do it ?

Question

I want to add a menu to my application screens. The menu will have the menu icons which are horizontal scroll-able one menu at a time when left or right arrow pressed.

Answer 1

.halfStyle {
position:relative;
display:inline-block;
width:1;
font-size:80px;
color: black;
overflow:hidden;
white-space: pre;
}
.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: #f00;
}
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.