Clever Geek Handbook

Draw a line with a range on hover over a link

I am trying to draw a line below the link as it hovers over it. Something similar to this: https://codepen.io/tsimenis/pen/BKdENX

So, I tried to add the width: 0%;

on class .underline

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>
+3


source to share


3 answers


Here's a demo. Hope this helps!

In demo

  • I am setting parent to be relative
  • I am using an element :after

    as an underline by setting an absolute value at the 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>
Run codeHide result


+4


source


Things you need to fix

1 - since span is an element with display: inline by default, you must force it to be display:inline-block

or block to use the width for it.

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



3 - li should have a hover .underline since it has a width of 0 and the pointer skews it. so it should be li:hover .underline {...}

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

Hope it helps

+2


source


Update

The OP Codepen was very complex, Demo 2 shows an example of a template I use sometimes.

Tips

  • Wrap everyone <span>

    around everyone<a>

  • Selectors with pseudo :before

    and :after

    are key selectors for this effect.

Demonstration of changes 1

 /* 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>
Run codeHide result


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>
Run codeHide result


+1


source






More articles:


All Articles