Grow your CSS skills. Land your dream job.

Create more beautiful headlines with pseudo elements?

  • eck
    # February 3, 2012 at 7:09 am

    Hello,

    I tried to create a headline which has a line behind the actual text, but it just didn’t work. I’ve uploaded an image how it should look like in the end without using extra html markup or background images.

    Image

    Do you know a solution? In my case it does not have to work with IE or older browser versions.

    Thank you for your help!

    Regards
    Eck

    # February 3, 2012 at 8:11 am

    Sure: http://tinkerbin.com/eMmNZPz1

    eck
    # February 4, 2012 at 2:35 pm

    Hey Paulie_D,

    thank you for your solution, I really appreciate it. But I miss the flexibility, imagine we have a 500px column and text changes from day to day and the line in the background has to fill out the whole width (500px) except the space where the text is.

    Maybe it’s possible to tweak your draft to gain that flexibility, I tried to work with floating, but it didn’t work :)

    Does any one of you has a clue?

    Thanks!

    # February 4, 2012 at 5:13 pm

    Here is a way to achieve it, building on the work of Paulie_D …
    http://tinkerbin.com/66BHA1Kr

    Explanation

    By setting the line-container element to 500px you define your width.
    Set the background of the element to a gradient that renders the horizontal blue line. This will be displayed across the full 500px width.

    Inside the container put your ‘h1′ heading, adding a ‘span’ element that contains your heading text, now you cannot see the blue line.

    The ‘h1′ element will auto size to fill the available width (note: if your text exceeds 500px width it will move over 2 lines). Set the background of the ‘h1′ element to transparent, you will see the blue line through the whole text.

    Set the background of the ‘span’ element to white, and only the background of the text within the ‘span’ will be white. You can now see the blue line to the left and right of the required text.

    HTML





    Your Text Goes Here



    CSS


    .line-container {
    width:500px;
    overflow:hidden;
    background: -webkit-linear-gradient(
    top,
    white,
    white 49%,
    blue 50%,
    blue 52%,
    white 52%,
    white);
    margin-top:25px;
    margin-bottom:25px;
    }

    h1 {
    text-align:center;
    background: transparent;
    }

    span {
    background-color:white;
    }

    Hope this helps,

    Chris.

    # February 4, 2012 at 8:24 pm

    Don’t forget the

    background: -moz-linear-gradient(
    top,
    white,
    white 49%,
    blue 50%,
    blue 52%,
    white 52%,
    white);

    for the firefox users.

    # February 5, 2012 at 10:54 am

    There is an easier way to do it with pseudo elements, using only the h1, and it’s parent. See here: http://jsfiddle.net/uTjqN/

    # February 5, 2012 at 5:19 pm

    I’ve had a look at all options so far, and I would do it in a similar way to @cnwtx, although without the need for overflow: hidden; http://jsfiddle.net/joshnh/2dUqV/

    If you didn’t want to rely on the parent element (e.g. the header isn’t at the top of its parent) then you would have to use an additional element.

    eck
    # February 5, 2012 at 5:47 pm

    Wow, I really like your ideas. The last one from @joshuanhibbert works perfect for me, because it is really flexible and simple.

    I hope I’m not the only person who can benefit from it..

    Thanks to all of you!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".