Strange behavior observed while attempting to create a smooth CSS transition effect from the right side

Is there a way to create a hover effect in my navbar where a line appears from the bottom left and top right, without causing any size or alignment issues with the links?

* {
  margin : 0;
  padding: 0;
}

nav{
background-color: black;
width: 1200px;
height: 110px;
position: relative;
z-index: 10;
}

ul{
  left: 0;
}

.nav{
  position: relative;
}

.navlink{
  margin-right: 14px;
}

.navlink1{
  margin-right: 14px;
  margin-left: 14px;
}

.navlink4{
margin-right: 0;
}

.navlink::before{
  content: '';
  display: block;
  width: 0;
  height: 5px;
  background:darkred;
  transition: width .5s;
  float: right;
}

.navlink:hover::before{
  width: 100%;
  transition: width .5s;
}

.navlink::after{
  content: '';
  display: block;
  width: 0;
  height: 5px;
  background:darkred;
  transition: width .5s;
}

.navlink:hover::after{
  width: 100%;
  transition: width .5s;
}

.navlink1::before{
  content: '';
  display: block;
  width: 0;
  height: 5px;
  background:darkred;
  transition: width .5s;
}
 
li{
display: inline-block;
}

li a{
  display: inline-block;
background-color: #FFDA45;
border: black solid 1px;
color: white;
text-decoration: none;
padding: 20px;
width: 235px;
margin-top: 11px;
margin-bottom: 11px;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 200%;
}
<nav>
    
<ul class="nav">
  <li><a class="navlink" href="index.html">Home</a></li>
  <li><a class="navlink" href="TLOU part II.html">TLOU part II</a></li>
  <li><a class="navlink" href="Video's.html">Video's</a></li>
  <li><a class="navlink" href="Music.html">Music</a></li>
</ul>

</nav>

I initially used float: right; to make the line come from the right side but encountered unexpected behavior. Here is how it works without using float: right:

* {
      margin : 0;
      padding: 0;
    }

    nav{
    background-color: black;
    width: 1200px;
    height: 110px;
    position: relative;
    z-index: 10;
    }

    ul{
      left: 0;
    }

    .nav{
      position: relative;
    }

    .navlink{
      margin-right: 14px;
    }

    .navlink1{
      margin-right: 14px;
      margin-left: 14px;
    }

    .navlink4{
    margin-right: 0;
    }

    .navlink::before{
      content: '';
      display: block;
      width: 0;
      height: 5px;
      background:darkred;
      transition: width .5s;
    }

    .navlink:hover::before{
      width: 100%;
      transition: width .5s;
    }

    .navlink::after{
      content: '';
      display: block;
      width: 0;
      height: 5px;
      background:darkred;
      transition: width .5s;
    }

    .navlink:hover::after{
      width: 100%;
      transition: width .5s;
    }

    .navlink1::before{
      content: '';
      display: block;
      width: 0;
      height: 5px;
      background:darkred;
      transition: width .5s;
    }
     
    li{
    display: inline-block;
    }

    li a{
      display: inline-block;
    background-color: #FFDA45;
    border: black solid 1px;
    color: white;
    text-decoration: none;
    padding: 20px;
    width: 235px;
    margin-top: 11px;
    margin-bottom: 11px;
    text-align: center;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 200%;
    }
<nav>
        
    <ul class="nav">
      <li><a class="navlink" href="index.html">Home</a></li>
      <li><a class="navlink" href="TLOU part II.html">TLOU part II</a></li>
      <li><a class="navlink" href="Video's.html">Video's</a></li>
      <li><a class="navlink" href="Music.html">Music</a></li>
    </ul>
    
    </nav>

I want the hover effect to remain the same but have the top line come from the right side instead.

htmlcss

Answer №1

To achieve this effect using background, you can simply adjust the position and size to your liking:

li a {
  background: 
    linear-gradient(darkred,darkred) bottom 5px left  5px,
    linear-gradient(darkred,darkred) top    5px right 5px,
    #FFDA45;
  background-size:0% 8px; /* width:0 height:8px */
  background-repeat:no-repeat;
  transition:0.5s;
}
li a:hover {
  /* full width minus 5px from left and right */
  background-size:calc(100% - 10px) 8px;
}

Full code: 

* {
  margin: 0;
  padding: 0;
}

nav {
  background-color: black;
  width: 1200px;
  height: 110px;
  position: relative;
  z-index: 10;
}

ul {
  left: 0;
}
.nav {
  position: relative;
}

.navlink {
  margin-right: 14px;
}


li {
  display: inline-block;
}

li a {
  display: inline-block;
  background: 
    linear-gradient(darkred,darkred) bottom 5px left  5px,
    linear-gradient(darkred,darkred) top    5px right 5px,
    #FFDA45;
  background-size:0% 8px;
  background-repeat:no-repeat;
  transition:0.5s;
  border: black solid 1px;
  color: white;
  text-decoration: none;
  padding: 20px;
  width: 235px;
  margin-top: 11px;
  margin-bottom: 11px;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 200%;
}
li a:hover {
  background-size:calc(100% - 10px) 8px;
}
<nav>

  <ul class="nav">
    <li><a class="navlink" href="index.html">Home</a></li>
    <li><a class="navlink" href="TLOU part II.html">TLOU part II</a></li>
    <li><a class="navlink" href="Video's.html">Video's</a></li>
    <li><a class="navlink" href="Music.html">Music</a></li>
  </ul>

</nav>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Allow one child to be visible even if the parent container has hidden overflow (or a different setting)

Is there a way to achieve the same look as shown in this example, but without repeating the border-radius code for the div.left in the CSS? It feels redundant and I suspect my approach may not be optimal. If you have any suggestions on how to accomplish t ...

htmlcssoverflow

Establishing space between table rows

I need to create a specific margin between two rows in a table. In my css code, I have the following snippet: background-color: #72c2dd; margin-top: 25px; The background-color is being applied correctly, but the margin-top property is not working as int ...

htmlcssmarginhtml-table

obtain the string representation of the decimal HTML entity value

Similar Question: how to create iphone apps similar to ibeer, imilk, ibug, ibeer Using javascript to obtain raw html code Imagine having an html section like this: <div id="post_content"> <span>&#9654;<span> </div> ...

javascriptjqueryhtmlencoding

Quicker way to apply appendChild

Is there a more efficient method to simplify the process of creating elements from an object fetched via a request? While the current code is functional, it seems overly verbose for what appears to be a straightforward task. async function getJobs() { ...

javascripthtmlfetchappendchild

Set a predefined height for an element, yet ensure it adjusts to fit within its container (with the option to overflow only if it reaches a minimum specified height)

Consider this setup: A heading text a main content block All inside a single parent container. .outer { max-height: 200px; background-color: green; } .inner { min-height: 50px; /*for illustration, default height is set higher than ou ...

htmlcssposition

Exploring ways to customize the input color of Material UI TextField when it is disabled [Version: 5.0.8]

I am having trouble changing the border color and text color when an input is disabled. I have tried multiple variations, as seen below: const textFieldStyle = { '& label': { color: darkMode?'#1976d2':'', } ...

javascriptcssreactjsmaterial-ui

PHP HTML Decoding Unveiled

Dealing with HTML that appears like this can be challenging: <font color=3D=22=236EAED2=22 style=3D=22font-siz= e:13px;font-family:arial;=22><B>Some Info Here</B></font></= A></td></tr><tr><td><font ...

phphtmlencodingcharacter-encoding

I am looking to transform col-sm-4 into two evenly sized columns with one row at the bottom using Twitter Bootstrap

Hello there, I have successfully created three columns in one row with column sizes of col-sm-4 each. Each column is further split into two equal sections and includes a footer row. You can see the alignment in the image below: Check out this sample align ...

htmlcsstwitter-bootstrap

Creating a default menu within a specific route in Ember.js is a crucial step in

I have created a JSBin code for my Ember.js application which can be found here: When I click on Item A, I want the ABCD menu on the left to remain visible and not disappear. Thank you. ...

javascriptjquerycssember.js

What steps can be taken to ensure that the design of this page flows seamlessly?

Interested in a design similar to this <!DOCTYPE html> <html lang="en> <head> <meta charset="UTF-8> <title>Title</title> <style> html, body { height: 100%; margin: 0; } .wrapper { min-height: 250p ...

htmlcss

Tips for maintaining the responsiveness of both images and text within a div container

I'm completely new to HTML and CSS. Everything looked perfectly aligned until I added text inside the three divs and now my images are unbalanced, even though I've set the same width and height: Here is the code snippet: #wrapper{ display:fl ...

htmlcssgoogle-web-designer

css webpack react component not displaying background images

I'm facing an issue where I can't seem to get the image to display as a background. If I just attach the image directly, it shows up without any problems. However, my intention is to make it a background image so that I can overlay text on top of ...

javascriptcssreactjssass

The conditional rendering logic in the ng-if directive does not seem to be synchronizing

Currently, I am delving into AngularJS and working on a basic application to gain familiarity with it. Within my app, there are four tabs: List, Create, Update, and Delete. However, my goal is to only display the Update and Delete tabs when I press the b ...

javascripthtmlangularjs

Clicking on Google Code Prettify does not trigger syntax highlighting

I utilize Google Code Prettify for syntax highlighting my code. Below is the HTML snippet I use: <head> <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script> </head> <body> ...

javascriptjqueryhtmlgoogle-code-prettify

Placing numbers at the top of the HTML table cell for better visibility

I am currently utilizing a two-column HTML table to showcase a list of rules. In one column, I have the rule's number, while in the other, I have the rule itself. However, I've noticed that the rule numbers are appearing near the bottom of their ...

css

Tips for altering the appearance of the material-ui slider thumb design when it is in a disabled state

Through the use of withStyles, I have successfully customized the style of the Slider: const CustomSlider = withStyles(theme => ({ disabled: { color: theme.palette.primary.main }, thumb: { height: 24, width: 24, }, }))(Slider); How ...

javascripthtmlcssreactjsmaterial-ui

Tips for Customizing a Bootstrap input-group to Resemble a form-group

I'm struggling to match the appearance of the last row with the others, but I want to include the icon in the text box. Adjusting the width has been a challenge! (I'm sorry for the inconvenience, the code snippet may not display correctly on thi ...

htmlcsstwitter-bootstrapbootstrap-4

Creating an appealing navbar in React by skillfully integrating the image logo and brand name for a

Having some trouble positioning my logo on the top left corner of the navbar. It keeps ending up in an awkward spot alongside the brand name. https://i.stack.imgur.com/XZjV9.png If anyone has any tips on how to properly align the logo and brand on the na ...

htmlcssreactjsmaterialize

Dropdown feature in the side navigation bar

Is it possible to create a drop-down section in a navigation bar using HTML/CSS/JS? For example, clicking on 'products' would reveal a list of products that disappears when clicked again. If this is achievable, how can it be done? I am currently ...

javascripthtmlcss

Utilizing the JSON File in Your HTML Webpage: A Comprehensive Guide

I'm currently trying to integrate the following JSON file into my HTML page. <html> <head> <title> testing get</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> ...

javascripthtmljsonajax