Is it possible to apply CSS to half of a character/word?

protekatconsulting's picture

They have: 2 posts

Joined: Jul 2015

Is it possible to apply CSS to half of a character/word?

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Not that I've ever come across! What is the use case, just out of curiosity?

They have: 1 posts

Joined: Mar 2015

Yes it is possible to apply css to half of a character

X

.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);
overflow:hidden;
color: #f00;

link removed

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

The above answer was copied from this Stack Overflow post:

http://stackoverflow.com/questions/23569441/is-it-possible-to-apply-css-...

If you're getting your answers from another website, please link to the source!

This technique, of course, isn't actually applying the CSS to half the character, it's duplicating the character using a pseudo-element and positioning it over top of the original. But it looks like it does the job Smiling

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.