CODEWITHSUNDEEP
jqueryhtmlcss
wawanopoulos
wawanopoulos

Reputation: 9794

Show element under link with :before on hover

I would like to reprodue the effect done on this page on the nav menu. On hover, a thin line appears under each link.

Here is the code that i have done, but the link never appears on hover.

HTML :

<body>
        <div id="header-container">
            <nav class="wrap header-container">
                <ul class="header-container_taxonomy floatleft">
                    <li><a href="http://www.numerama.com/tech/" class="">Tech</a></li>
                    <li><a href="http://www.numerama.com/politique/" class="">Politique</a></li>
                    <li><a href="http://www.numerama.com/pop-culture/" class="">Pop culture</a></li>
                    <li><a href="http://www.numerama.com/business/" class="">Business</a></li>
                    <li><a href="http://www.numerama.com/sciences/" class="">Sciences</a></li>
                    <div class="clearfix"></div>
                </ul>
            </nav>
        </div>
    </body>

CSS :

@font-face{
    font-family:'FuturaLT';
    src:url("futuraLT.ttf");
}

body {
    background-color: #eee;
    font-family: "Arial";
    margin: 0;
    padding: 0;
    border: 0;
}

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-weight: normal;
    vertical-align: baseline;
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    text-decoration: none;
}

a {
    color: inherit;
    cursor: pointer;
}

ul {
    list-style: none;
}

#header-container {
    height: 50px;
    background: #e9573f;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    width: 100%;
    z-index: 50;
    position: relative;
}

.header-container {
    position: relative;
    height: 50px;
}

.wrap {
    max-width: 1000px;
    margin-left: auto;
/*     margin-right: auto; */
}

*, *:before, *:after {
    outline: none;
    box-sizing: inherit;
}

.header-container_taxonomy {
    font-size: 13px;
    float: left;
    text-align: center;
    background: #d34e39;
    width: calc(100% - 400px);
    font-weight: normal;
    vertical-align: baseline;
    margin: 0;
    padding: 0;
    border: 0;
    height: 50px;
}

.header-container_taxonomy a:before, #sticky-nav .sticky-nav-taxonomy a:before, .header-container_taxonomy p:before, #sticky-nav .sticky-nav-taxonomy p:before {
    -ms-transition-property: all;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -ms-transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -ms-transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
    -moz-transition-timing-function: linear;
    -ms-transition-delay: 0s;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    content: "";
    display: block;
    height: 2px;
    background: #f7f7f7;
    padding: 0;
    top: 48px;
    position: absolute;
    width: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.header-container_taxonomy li {
    display: inline-block;
    margin: 0 5px;
}

.header-container li a:not([class^="icon-"]) {
    display: block;
    padding: 0 10px;
    line-height: 50px;
    color: #f7f7f7;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    position: relative;
    font-size: 100%;
    font-family: "FuturaLT";
    -webkit-font-smoothing: antialiased;
}

https://jsfiddle.net/m84x4hdd/

Upvotes: 1

Views: 59

Answers (1)

Iago
Iago

Reputation: 1214

There is no hover in your code, so i just put:

.header-container li a:hover:before {
    width: 100%;
}

https://jsfiddle.net/iagomelanias/m84x4hdd/2/

You could also do:

.header-container li:hover a:before {
    width: 100%;
}

Same result.

Upvotes: 2

Related Questions