Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Applying different CSS to different parts of a single character

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 189
    Comment on it

    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!

    Applying different CSS to different parts of a single character

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: