Hey Readers!

We have all styled HTML elements with various sort of CSS. The styling applies to whole of the element. But have we ever tried applying different CSS to one single character, i.e. one half with one CSS and the other half with other CSS. Probably not.

Here we will.

First, we simply give the styling that is meant for the first half, to the entire character. And then with the pseudo element 'before' or 'after', provide the CSS for the other half. Mention the height of the second half (the part you desire to have the particular CSS). Though the length varies with every browser i.e. each browser measures the length somewhat differently.

Here is an example showing the same.

HTML :

<span class="half" title="A">A</span>

CSS :

.half {
    font-size: 90px;
    font-weight: bold;
    position: relative;
    color: pink;
    line-height: 1em;
}

.half:before {
    position:absolute;
    content:''attr(title)'';
    color: grey;
    height: .5em;
    overflow: hidden;
}

OUTPUT :

Keep Coding!