Grow your CSS skills. Land your dream job.

Transitions in hidden blocks elements of a list

  • # March 7, 2013 at 5:24 pm

    Hi there!

    I had this code but need to improve usability and add some requirements.

    • I need to all text (CSS :after content) show in one line. The last item (No Data) is displayed incorrectly.
    • All labels (loaded via JS) show in one line.
    • :hover action must be with soft animation (labels content).
    # March 7, 2013 at 10:39 pm

    To prevent line breaks:
    white-space: nowrap


    Still need an animation in CSS3 transitions of labels (from display none to block).

    # March 8, 2013 at 3:51 am

    1. We don’t use CSS generated content as real content, especially not for labels. It is not indexed, it is not accessible, it is not a good idea.
    2. However you could use pseudo-elements to create the markers. That would be appropriate.
    3. You don’t have to use JavaScript for such things. Simply use a hidden element after each label (like a span or something), and display the element when hovering the label.

    # March 8, 2013 at 5:01 am

    Kind of like this: http://codepen.io/pen/

    Sorry…only had a couple of minutes so it’s pretty rough.

    # March 8, 2013 at 6:45 am

    Pretty rough, yes :P

    # March 8, 2013 at 7:58 am

    Not sure if trolling or simply linked to wrong URL.

    # March 8, 2013 at 7:59 am

    Balls…not sure I saved it.

    EDIT…Aha ===>

    http://codepen.io/Paulie-D/pen/mCGke

    # March 8, 2013 at 11:27 am

    http://codepen.io/nhereveri/pen/jIaJK

    OK Hugo, using :pseudo elements is much elegant.

    I use JS to push content from JSON into labels.

    Content can be static. At least for this project.

    But lost the transition on bullets.

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".