0

I'm trying to style a list with the following effect:

list where selected item is without right border

I can achieve this using :after, but that's only if the list's overflow-y property isn't set to scroll or auto (which causes overflow-x to become auto as well, see this SO answer). If I set the :after element's position to absolute, it won't scroll with the list.

Any idea how can I get this effect in a scrolling list?

Thanks

Community
  • 1
  • 1
Ronnyle
  • 147
  • 9
  • can you post the html and css for the list? I would have thought you would just set the border of `li` to 3px or whatever and then 0 for the selected item – Rhumborl Jul 03 '15 at 19:53
  • @Rhumborl I can't set the borders on the items themselves because then when the list is empty the container won't have borders. So the container must have the right border and the selected item must cover it somehow. – Ronnyle Jul 03 '15 at 20:38

1 Answers1

1

A simple workaround to this would be to use a box-shadow property for the container. This way, elements would automatically overwrite it while it would be visible if container was empty.

box-shadow: inset -1px 0 0 0 #C4CAD2;

Here is a fiddle : http://jsfiddle.net/m93uzktj/

By the way note that scrollbars placed on the right of the container will hide the effect.

Titouan Launay
  • 178
  • 1
  • 10