motion graphic border not joining at the corner

Yesterday, my code was functioning perfectly. However, after making several revisions to include all animations and styles, I notice that the animated borders no longer connect at three corners. Can someone please assist in identifying what went wrong during these changes?

.desktopNav {
  list-style: none;
  position: fixed;
  display: block;
  top: 60px;
  margin: 0 auto;
}

.desktopNav li {
  display: inline;
  position: relative;
  margin: 0 1.7em;
}

.desktopNav a {
  text-decoration: none;
  color: #222323;
  font-family: 'Raleway';
  font-size: 2em;
  font-weight: 200;
  padding: 10px 15px;
  position: relative;
}

.hoverbox::before,
.hoverbox::after {
  content: '';
  position: absolute;
  transition: transform .5s ease;
}

.hoverbox::before,
.hoverbox::after {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
  border-color: #f7941e;
}

.hoverbox::before {
  border-width: 2px 0 2px 0;
  transform: scaleX(0);
}

.hoverbox::after {
  border-width: 0 2px 0 2px;
  transform: scaleY(0);
}

.hoverbox:hover::before,
.hoverbox:hover::after {
  transform: scale(1, 1);
}
  <ul class="menu desktopNav">

  <li><a href="#" class="hoverbox">home</a></li>

  <li><a href="#" class="hoverbox">about</a></li>

  <li><a href="#" class="hoverbox">services</a></li>
  </div>


  <li><a href="#" class="hoverbox">work</a></li>

  <li><a href="#" class="hoverbox">process</a></li>

  <li><a href="#" class="hoverbox">contact</a></li>
  </div>
</ul>

htmlcss

Answer №1

Utilize the box-sizing property.

.hoverbox::before,
    .hoverbox::after {
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border-style: solid;
      border-color: #f7941e;
      box-sizing: border-box;
    }


.desktopNav {
  list-style: none;
  position: fixed;
  display: block;
  top: 60px;
  margin: 0 auto;
}

.desktopNav li {
  display: inline;
  position: relative;
  margin: 0 1.7em;
}

.desktopNav a {
  text-decoration: none;
  color: #222323;
  font-family: 'Raleway';
  font-size: 2em;
  font-weight: 200;
  padding: 10px 15px;
  position: relative;
}

.hoverbox::before,
.hoverbox::after {
  content: '';
  position: absolute;
  transition: transform .5s ease;
}

.hoverbox::before,
.hoverbox::after {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
  border-color: #f7941e;
  box-sizing: border-box;
}

.hoverbox::before {
  border-width: 2px 0 2px 0;
  transform: scaleX(0);
}

.hoverbox::after {
  border-width: 0 2px 0 2px;
  transform: scaleY(0);
}

.hoverbox:hover::before,
.hoverbox:hover::after {
  transform: scale(1, 1);
}
  <ul class="menu desktopNav">

  <li><a href="#" class="hoverbox">home</a></li>

  <li><a href="#" class="hoverbox">about</a></li>

  <li><a href="#" class="hoverbox">services</a></li>
  </div>


  <li><a href="#" class="hoverbox">work</a></li>

  <li><a href="#" class="hoverbox">process</a></li>

  <li><a href="#" class="hoverbox">contact</a></li>
</ul>

Answer №2

To address this issue, consider the following solution:

For a functional demonstration, check out this fiddle: http://jsfiddle.net/uniquereference/abc123/

.hoverbox::before, .hoverbox::after {
    content:'';
    position: absolute;
    transition: transform .5s ease;
}
.hoverbox::before, .hoverbox::after {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-style: solid;
    border-color: #f7941e;
}
.hoverbox::before {
    border-width: 0 0 0 0;
    transform: scaleX(0);
}
.hoverbox::after {
    border-width: 2px 2px 2px 2px;
    transform: scaleY(0);
}
.hoverbox:hover::before, .hoverbox:hover::after {
    transform: scale(1, 1);
}

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

Unable to Toggle the 'Checked' Prop on Selection with React Bootstrap CheckBox

As a newcomer to React Bootstrap, I've been encountering an irritating problem with checkboxes in a form I'm developing. After updating the state, the checkboxes don't remain checked when selected. However, if I check them again, they stay ...

htmlreactjsreact-bootstrap

Perform the action when the button is clicked

I'm struggling with finding a solution to this problem. I have an input field and a submit button. My goal is to update the value of a variable to match the value in the input field when the submit button is clicked. Additionally, I need to execute a ...

jqueryhtmljson

Only the first cell is affected by the background color setting

... <th style='background-color:#cccccc;font-weight:bold'><td></td><td>Address</td><td>Last Name</td><td>First Name</td><td>ZIP Code</td><td>City</td></th> ...

htmlcss

Incorporating Google's Invisible Recaptcha with Jquery Ajax and PHP

I am struggling to make my form, which includes Google invisible reCAPTCHA, work seamlessly with my jQuery AJAX and PHP. It appears that the token is not being properly sent to my PHP page via AJAX, resulting in the following error message from my PHP scri ...

phpjqueryhtmlajaxrecaptcha

Is it possible to animate CSS Grid components?

Is it possible to animate a re-ordered set of elements in an array that are arranged using a CSS Grid layout? Check out this quick boilerplate ...

reactjscssanimationcss-grid

Adding a Header Image to the Top of All Pages with CSS

As I dive into the world of website creation, I've encountered a challenge that has me stumped. My goal is to have a banner displayed at the top of each webpage on my site, and I'm unsure if this can be achieved using CSS. While I've success ...

htmlcss

Using GSAP to merge texts from left to right

I'm curious about the animation technique used by the developer to make his name come together from right to left. I'd love to try implementing it myself to improve my CSS skills. It looks like GSAP ScrollTrigger was involved in this animation, ...

cssanimationgsap

Updating HTML label values using jQuery in a loop based on their index position

I am having an issue with my ajax call where I want to loop through each label in a class and set their value to the response returned from the server. However, the current code sets all labels to the same value instead of setting individual values based o ...

javahtmlajaxjquery

Need some assistance in finding a way to input multiple values from multiple buttons into a single input field in JavaScript

Hello, I am looking for a little help with reading multiple values using multiple buttons such as 1, 2, and 3, and displaying the output in the input like '123' instead of just one number at a time. Concatenate numbers with every click. <inpu ...

javascriptjqueryhtmlajax

Having trouble properly implementing variable updates when creating a multi-theme website

I have a Next.js app and a globals file containing all the themes: body { margin: 0; font-family: Inconsolata, monospace; background-color: var(--bg-color); } :root { --bg-color: #262a33; --main-color: #43ffaf; --sub-color: #526777; --sub-al ...

javascriptcssreactjsnext.js

Combining the jquery-UI slider functionality with the canvas rotate() method

Is there a way to rotate an image using html2canvas plugin and jQuery UI slider? I am new to programming and need some guidance on how to achieve this feature. Here is my current progress: http://jsfiddle.net/davadi/3d3wbpt7/3/ ` $("#slider").slider({ ...

javascriptcssjquery-uihtml2canvas

Positioning CSS icons beside text

I'm having trouble aligning a close button I created in CSS with regular text. Although the containing span element seems to align with the adjacent text, it doesn't align properly with the child divs. <a class="event-filter button" href="#"& ...

htmlcss

Material UI Paper component does not extend to full viewport height

My React component includes a Material UI <Paper> component that acts as a background. This <Paper> is nested inside a <ThemeProvider>, which in turn is nested within a <div>, and then further nested inside the <body>. I have ...

cssreactjsmaterial-ui

How can PHP be utilized to dynamically add classes to <li> elements and alternate them after every third item

I'm trying to find a way to add a class to an unordered list and alternate that class after every third item. Here's the code I have so far: <?php $i=1; foreach($this->items as $item) : ?> <li class="<?php if ($i % 3 == 0) : ...

phpcssaddclass

Is the component experiencing issues with its style functionality?

I am attempting to add CSS styles to app.component.ts using the :host property, but I am not seeing the desired results. The CSS is being applied, but not correctly. .ts export class AppComponent { title = "Default Title" data = 'This is defaul ...

cssangular

Let's apply some CSS to the font style within the body

I've been incorporating a "footer.php" page into all other pages of my website. This footer showcases the site's name at the bottom of the screen and uses a custom font loaded with @font-face. Initially, I had something like this placed inside t ...

htmlcssw3c-validation

Problem arises when attempting to display a div after clicking on a hyperlink

I'm encountering an issue with displaying a div after clicking on a link. Upon clicking one of the links within the initial div, a new div is supposed to appear below it. All tests conducted in jsfiddle have shown successful results, but upon transf ...

jqueryhtmlcsstoggle

Swap out a div identifier and reload the page without a full page refresh

I am interested in learning how to dynamically remove a div id upon button click and then add it back with another button click to load the associated CSS. The goal is for the page to refresh asynchronously to reflect these changes. So far, I have successf ...

javascriptjqueryhtmlcssajax

Struggling to make jQuery apply .css("display", "block") upon clicking a link

I am having trouble with getting jQuery to display CSS properties when a link is clicked on. After testing the CSS properties, I found that setting the display to "block" in the style sheet works as expected. However, if I set the initial CSS display to " ...

jqueryhtmlcss

Creating a hierarchical JSON structure to populate a Handlebars template (HTML) for an iterative component, allowing for the display of three levels of interconnected

Currently, I am working on developing a mega menu component that involves three levels of content. Level 1 (L1): This level is displayed horizontally in a traditional navbar. When hovered over, it expands to reveal the mega menu. Level 2 (L2): These item ...

javascripthtmljsonhandlebars.js