The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Challange

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #36072

    Hey Guys,

    So i am developing a blog and there is going to be an unordered list of categories that will be dynamic, so they will be of varying word lengths. Here is a screenshot of the design, i am looking for a suggestion on how i can get the dotted lines on each side of the category names using CSS.


    Say the <li> background is an image for now – One long line of dots. Then have the word wrapped in a span, with a white background + padding. That would give a similar effect to that.

  • Career
  • Note: The span background /may/ cut the some of the dots in half if they are larger than 1px. That’s unavoidable though. A similar problem was posed in the recent CSS Off.


    Thanks Jimmy. I was thinking something along those lines but was trying to avoid the dots being cut off.

    Also was thinking that it could be achieved with :before and :after psudo classes but not sure if that would be any different when it comes to the final result.

    Do you have a link to the similar problem in the CSS Off?


    The section titles have the squares starting right after the titles without being cut off each time.

    We’ll see what everyone did to solve that problem when the top entries are linked to ( that should be in about 2 – 4 weeks.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.