Horizontal list with Susy grid

Question

I want to build an android like main navigation that fits into a Susy Grid. It looks like this:

The code goes here:

HTML:

<div class="container">
    <nav>
        <ul class="horizontal-list">
            <li>
                <a href="#">One</a>
            </li>
            <li>
                <a href="#">Two</a>
            </li>
            <li>
                <a href="#">Three</a>
            </li>
            <li>
                <a href="#">Four</a>
            </li>
        </ul>
    </nav>
</div>

SASS:

header.main {
    height: $headerHeight;
    background: url('images/headerBackground.gif');

    .container {
        @include container;
        @include susy-grid-background;

        nav {
            @include span-columns(8);

            ul.horizontal-list {
                @include horizontal-list;
                overflow: visible;

                li {
                    @include isolate-grid(2, 8);

                    padding: 0;
                    display: table;
                    a {
                        // vertical alignment
                        display: table-cell;
                        height: $headerHeight / 2;
                        padding-bottom: 2px;
                        vertical-align: bottom;

                        // appearance
                        color: $greyLight;
                        font-size: 18px;
                        text: {
                            transform: uppercase;
                            decoration: none;
                        }

                        // hover
                        position: relative;
                        &:before {
                            content: '';
                            display: block;
                            width: $headerUnderlineGap;
                            background: $black;
                            height: $headerHeight;
                            position: absolute;
                            top: 0;
                            margin-left: -$headerUnderlineGap + 1;
                        }

                        &:hover {
                            color: $white;

                            &:after {
                                content: '';
                                display: block;
                                background: $cyanLight;
                                width: 114%; // TODO check why space(2, 8) does not work
                                height: 4px;
                                position: absolute;
                                margin: -1px 0 0 1px;
                            }
                        }
                    }
                }
            }
        }
    }
}

I feel it's a bit hacky to set the width of the &:after element to 114% and not to space(2, 8). Can anyone tell me, how to set up a horizontal navigation with a Susy grid and an continuous underline, that hovers all the way to the next li element.

Thanks in advance!

Answer 1

space(2,8) doesn't work in that case because 8 is not actually the context: 2 is. You just need space(2,2).