<style>
	li {
		display: flex;
		list-style-type: none;
		position: relative;
		margin-left: 50px;
		height: 45px;
		white-space: nowrap;
		align-items: center;
	}

	li:before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
	}

	a {
		color: #000000;
		text-decoration: none;
		display: inline-flex;
		padding: 0 10px;
		font-size: 20px;
	}

	@media only screen and (max-width: 767px) {
		a {
			display: none;
		}
	}

    .onmouse {
		text-decoration: underline;
    }
</style>

<script>
    export let item;
    let onmouse;

    function enter() {
        onmouse = true;
    } 

    function leave() {
        onmouse = false;
    }
</script>

<li on:mouseenter={enter} on:mouseleave={leave} >
    <a href={item.href} class:onmouse>{item.label}</a>
</li>