The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

How to create a line next to comments like the image?

  • # March 16, 2013 at 10:00 am

    Hello to everyone reading this!

    I have created a blog comment style in here :

    now I want to put a line like image below to it :

    How can I do that?

    thanks in advance!


    # March 16, 2013 at 11:51 am

    Can this be done with :after and :before elements?

    # March 16, 2013 at 12:08 pm

    Probably…but I’m not sure that’s necessarily the best solution.

    I’d have to think but I would assume there are a variety of comment ‘types’ that could be used as classes and background images would work.

    # March 16, 2013 at 12:19 pm

    Not with all the overflow: hidden you have :( I tried. Best would be to try to make those lines borders (so you would have to redesign the whole thing so the edges align with the lines)… I think.

    # March 16, 2013 at 1:46 pm

    I would personally just use a background image (positioned left, no repeat) for each comment in the ul with class “children”.

    There’s some additional stuff that will be needed (the “main” comment shouldn’t have a line down when there’s no child comments, for example) but that’s where I would start.

    # March 16, 2013 at 1:50 pm

    I was think more along the lines of bg images in the left padding depending on the comment type/hierarchy.

    EDIT: Ah…@Senff beat me to it.

    # March 16, 2013 at 8:31 pm

    I think the have this style in here: (search category > right-hand sidebar)

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed