"Connect the dots" of a slider navigation

Design help General
1

Hi! I’ve managed to change my navigation dots color with some easy custom code, but what i need to do now is to “connect” them. Since i can’t modify the HTML of the slider module, i was wondering if there’s a was of doing this with just CSS, has anyone already donde this?

This would be the proposed design:

and here is my site Read-Only:
https://preview.webflow.com/preview/lobsterstudio?utm_medium=preview_link&utm_source=designer&utm_content=lobsterstudio&preview=6d0365c304f07a0ee96b9e481363cbb6&pageId=5e9b28fa6343644f49bd268c&mode=preview

2

I’ll autoreply myself since i’ve found a workaround creating a border-top and adding some negative margin. Probably isn’t best practice but for know ir works! I’ll leave it here just in case somebody finds it useful.

.w-slider-nav { font-size: 20px; border-top: 1px solid #4b276c; } .w-slider-dot { background-color: #4b276c; margin-top: -45px; border: 4px #ede9e5 solid; } .w-slider-dot.w-active { background: #F64843; }