CODEWITHSUNDEEP
htmlcss
Nemus
Nemus

Reputation: 3995

Draw line with span when hover over link

I am trying to draw a line under the link when hovering over it. Something similar like this: https://codepen.io/tsimenis/pen/BKdENX

So, I tried to add width: 0%; on .underline class, and then width: 100%; on hover, but it doesn't work. What am I doing wrong? 

.underline {
    border-bottom: 1px solid;
    width: 0%;
    float: inherit;
     -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.underline:hover{
    width: 100%;
}
<nav id="site-navigation" class="main-navigation">

<div class="menu-primary-menu-bottom-container">
  <ul id="primary-menu-bottom" class="menu nav-menu" aria-expanded="false">
     <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="https://salt-nemanjamandic.c9users.io/te-koop/">te koop</a><span class="underline"></span></li>
     <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="https://salt-nemanjamandic.c9users.io/design/">design</a><span class="underline"></span></li>
     <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="https://salt-nemanjamandic.c9users.io/kijkappartement/">kijkappartement</a><span class="underline"></span></li>
     <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="https://salt-nemanjamandic.c9users.io/realisaties/">realisaties</a><span class="underline"></span>
  </ul>
</div>      
</nav>

Upvotes: 5

Views: 9157

Answers (3)

zer00ne
zer00ne

Reputation: 43975

Update

The OP Codepen was very elaborate, in Demo 2 is an example of a pattern I use sometimes.

Tips

  • Wrap each <span> around each <a>
  • The selectors with the pseudo elements :before and :after are key selectors for that effect.

Demo 1 Changes

 /* This change made the strikethrough an underline */              
     span:before,
     span:after {
      ...
       /* from top: 50% */
       bottom: 0%; 
       ...
       /* Alternated background-color several other areas so it matches
       || the links' colors.
       */
       background: #ff0; 
     }

 /* Basic <a> styles */
      a,
      a:link,
      a:visited {
        /* Original underline removed */
        text-decoration: none;
        color: #fff;
      }
      a:hover,
      a:active {
         color: #fc0;
      }

Demo 1

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300);
body {
  display: table;
  width: 100%;
  height: 100vh;
  margin: 0;
  background: #333;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #fff;
}

a,
a:link,
a:visited {
  text-decoration: none;
  color: #fff;
}

a:hover,
a:active {
  color: #fc0;
}

.container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 600px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: block;
  padding: 0 20px;
}

span {
  position: relative;
  display: block;
  cursor: pointer;
}

span:before,
span:after {
  content: '';
  position: absolute;
  width: 0%;
  height: 1px;
  bottom: 0%;
  margin-top: -0.5px;
  background: #ff0;
}

span:before {
  left: -2.5px;
}

span:after {
  right: 2.5px;
  background: #fff;
  transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

span:hover:before {
  background: #fc0;
  width: 100%;
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

span:hover:after {
  background: transparent;
  width: 100%;
  transition: 0s;
}
<nav id="site-navigation" class="main-navigation">

  <div class="menu-primary-menu-bottom-container">
    <ul id="primary-menu-bottom" class="menu nav-menu" aria-expanded="false">

      <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><span class="underline"><a href="https://salt-nemanjamandic.c9users.io/te-koop/">te koop</a></span></li>
      <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><span class="underline"><a href="https://salt-nemanjamandic.c9users.io/design/">design</a></span></li>
      <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><span class="underline"><a href="https://salt-nemanjamandic.c9users.io/kijkappartement/">kijkappartement</a></span></li>
      <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><span class="underline"><a href="https://salt-nemanjamandic.c9users.io/realisaties/">realisaties</a> </span></li>

    </ul>
  </div>
</nav>

Demo 2

@import url('https://fonts.googleapis.com/css?family=Raleway');
html,
body {
  width: 100%;
  height: 100%;
  font: 400 16px/1.2 Raleway;
  background: #333;
  color: #fff;
}

a,
a:link,
a:visited {
  position: relative;
  color: #0FF;
  font-variant: small-caps;
  text-decoration: none;
}

a:hover,
a:active {
  color: transparent;
  background-color: transparent;
  text-shadow: -.25px -.25px 0 #0FF, -.25px .25px 0 #0FF, .25px -.25px 0 #0FF, .25px .25px 0 #0FF;
}

a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0FF;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all .5s ease-in-out 0s;
  transition: all .5s ease-in-out 0s;
}

a:hover::before,
a:active::before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

b {
  color: #fc0;
}

dt,
dd {
  font-size: 1.5rem
}

dt {
  margin-bottom: 10px;
}
<dl>
  <dt>The order of link pseudo-classes</dt>
  <dd><a href='#'>a:<b>L</b>ink</a></dd>
  <dd><a href='#'>&nbsp;&nbsp;&nbsp;<b>o</b>&nbsp;&nbsp;&nbsp;</a></dd>
  <dd><a href='#'>a:<b>V</b>isited</a></dd>
  <dd><a href='#'>&nbsp;&nbsp;&nbsp;<b>e</b>&nbsp;&nbsp;&nbsp;</a></dd>
  <dd style='margin:10px 35px'><a href='#'>&nbsp;&nbsp;&nbsp;<b>&#128628;</b>&nbsp;&nbsp;&nbsp;</a></dd>
  <dd><a href='#'>a:<b>H</b>over</a></dd>
  <dd><a href='#'>a:<b>A</b>ctive</a></dd>
  <dd><a href='#'>&nbsp;&nbsp;&nbsp;<b>t</b>&nbsp;&nbsp;&nbsp;</a></dd>
  <dd><a href='#'>&nbsp;&nbsp;&nbsp;<b>e</b>&nbsp;&nbsp;&nbsp;</a></dd>
</dl>

Upvotes: 2

karlisup
karlisup

Reputation: 682

Here's a demo. Hope it helps!

In the demo

  1. I set parent as a relative element
  2. I use :after element as an underscore by positioning absolute on bottom of the li element

li {
  position: relative;
  display: inline-block;
}
li:after {
  content: "";
  position: absolute;
  left:0;
  top: 100%;
  width: 0;
  height: 2px;
  background-color: black;
  transition: width .3s ease-in-out;
}
li:hover:after {
  width: 100%;
}
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

Upvotes: 9

Fered
Fered

Reputation: 908

Things you should fix

1 - as span is a element with display:inline as default, you should force it to be display:inline-block or block in order to use width for it.

2 - your .underline class should have a border color.. currently its only border-bottom:solid 1px;

3 - the li must have hover not .underline as it has 0 width and pointer cant hover it. so it should be li:hover .underline {...}

You can see it in action here : https://codepen.io/FaridNaderi/pen/ZyxGEm

Hope it helps

Upvotes: 2

Related Questions