Ctrlk

nav bar

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box; 
}

body {
    background-color: #eee;
}

nav {
    display: flex;
    padding: 0.5em;
    background-color: gray;
}

nav > a {

    text-decoration: none;
    text-align: center;
    padding: 0.5em 1em;

    background-color: #57ce13;
    color: white;
}

/*
    ⭐️ not first A     
     = A + A
     = A:not(:first-child)
     = A:nth-child(n+2)
 */
nav > a + a {
    /* ⭐️ add margin to flex items */
    margin-inline-start: 0.5em;
}

nav > a:last-child {
    font-weight: bold;
    background-color: red;

    /* ⭐️ `margin: auto` will fill all available space */
    margin-inline-start: auto;
}

/* ⭐️ :hover 要擺在正常的 a 後面，不然會沒有作用 */
nav > a:hover {
    background-color: blueviolet;
}

Previousmodal dialog Nextglowing buttons

Last updated 4 years ago

Was this helpful?