What is the method for creating a hover line that perfectly mirrors the length of text above it?

I'm interested in creating a hover effect where a line appears above my text when hovering over it. The twist is, I want the hover line to match the length of each individual text. This effect will be applied to the navigation section of my HTML.

Here's my HTML code:

<!DOCTYPE html>
<html>
  <head>
    […] 
  </head>
  <body>
    <div class="navigation">
      <nav>
        <ul>
          <li><a href="#">Art of Gifting</a></li>
          <li><a href="#">Fashion</a></li>
          […]
        </ul>
      </nav>
    </div>

    […]

  </body>

  <footer>
    […]
  </footer>
</html>

And here's my CSS:

h1 {
  font-family: 'Satisfy', cursive;
  font-size: 70px;
  text-align: center;
}

.navigation ul{
  font-family: 'Tajawal', sans-serif;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-align: center;
}
[…]
htmlcss

Answer №1

      .menu-item a:hover:before{
          content:''; /* Essential */
          top:10%;
          left:20%;
          background-color: #f7f7f7;
          width: 8%;
          height:3px;
    }

Answer №2

Make sure to update your CSS using the code snippet provided below

.navigation a {
    position: relative;  /* New addition */
    color: #444;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
}

.navigation a::before {
    content: '';
    display: block;
    height: 5px;
    background-color: pink;
    position: absolute;
    top: -10px;        /* New addition */
    width: 0%;
    transition: all ease-in-out 250ms;
}

.navigation a:hover::before {
    width: 100%;      /* New addition */
}

Answer №3

To enhance your CSS, consider removing the "after" from .navigation a and try implementing it within the hover effect:

.navigation a:hover{
  color: pink;
  padding-top: 15px;
  border-top: 5px solid pink;
 }

Answer №4

Consider this approach:

To implement the solution, apply position:relative to the anchor tag.

.navigation a{
   position:relative;
}

Then adjust the styles as follows:

.navigation a::before{
  top: -15px;
}
.navigation a:hover::before{
  width: 100%;
}


h1 {
  font-family: 'Satisfy', cursive;
  font-size: 70px;
  text-align: center;

}

.navigation ul{
  font-family: 'Tajawal', sans-serif;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-align: center;
}

.navigation li{
  display: inline-block;
  float: left;
  padding: 40px 50px;
  text-align: center;
  margin-left: 70px;
  padding-top: 25px;

}

.navigation a {
  color: #444;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
      position: relative;

}

.navigation a:hover{
  color: pink;
}

.navigation a::before {
  content: '';
    display: block;
    height: 5px;
    width: 100%;
    background-color: pink;
    position: absolute;
    top: -15px;
    width: 0%;
    transition: all ease-in-out 250ms;
}

.navigation a:hover::before{
  width: 100%;
}
<!DOCTYPE html>
<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Satisfy|Tajawal&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <script src="myscripts.js">
    </script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
    <script type="script/script.js">
    </script>
    <title>Felicity Hayes Official Website</title>
  </head>
  <body>
    <h1>Felicity Hayes</h1>

<!--- Navigation -->
    <div class="navigation">
      <nav>
        <ul>
          <li><a href="#">Art of Gifting</a></li>
          <li><a href="#">Fashion</a></li>
          <li><a href="#">Fragrances</a></li>
          <li><a href="#">Bridal</a></li>
          <li><a href="#">The House</a></li>
          <li><a href="#">Services</a></li>
        </ul>
      </nav>
    </div>

    <div class="row">
      ...
      [Additional HTML code]
      ...
    </div>

  <footer>
    <button> Sign up to get updates </button>
    <a class="facebook" href="#"><i class="fab fa-facebook-f"></i></a>
    <a class="instagram" href="#"><i class="fab fa-instagram"></i></a>
    <a class="pinterest" href="#"><i class="fab fa-pinterest"></i></a>
    <a class="twitter" href="#"><i class="fab fa-twitter"></i></a>
    <a class="youtube" href="#"><i class="fab fa-youtube"></i></a>

  </footer>
</html>

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

Click on a div to smoothly scroll to the top, then automatically scroll to the bottom if already at the top position

I've implemented a JQuery code on my website that allows the page to scroll to the top when clicking on a div with the class of .bottom. The code is working perfectly fine, here it is: function scrollToTop(){ $('.bottom').click(function ...

javascriptjquerycssjquery-animatescrolltop

The option to clear searches is missing from the iOS interface

My application is designed to perform searches using post codes, and for the most part, it functions properly. However, I have encountered an issue where the clear icon on the right-hand side of the field does not display in certain browsers. To investiga ...

javascriptiosobjective-chtmlhtml-input

Tips on utilizing the getElementsByClassName method in JavaScript

Check out this HTML snippet: <html> <body> <div id="wrapper"> <div id="c_wrapper"> <div class="member"> <form name="f1"> </form> </div> ...

javascripthtmldomclientscript

Implementing Bootstrap 3 mobile design by necessity

My Wordpress site uses a Bootstrap 3 layout where the loop displays posts using 2 different templates. Type 1 <div class="row"> <div class="col-md-4"> <h1>title</h1> <h3>sub</h3> </div> ...

jqueryhtmlcsswordpresstwitter-bootstrap

Transferring Data Between Two Forms

Is there a way to transfer data between two HTML forms? For example, let's say we have two forms: Form 1: Contains a field for name and a submit button. Form 2: Contains fields for name, email, and a submit button. I would like to be able to fill o ...

phpjavascripthtmlforms

Include a tab button within a vertical tab list using Angular Material

I have utilized Angular Material to create a vertical tab, and I would like to incorporate an Add Tab button within the tab listing itself. Currently, when I add the button, it appears at the bottom of the layout instead. For reference, you can access the ...

cssangulartabsangular-materialmaterial-design

Utilizing encoding and decoding techniques in PHP and JavaScript with robust data attribute validation

I am utilizing data attributes to transfer information from HTML to JavaScript. The data attributes are derived from MySQL data, so they may contain spaces, resulting in validation errors since spaces are not permitted within attributes. My proposed solut ...

phpjavascripthtmlvalidationencode

HTML5 template design clashes with Smarty framework

I've been working with a simple pattern like this: <input type="text" pattern="[a-z]{2}" required ../> However, it never seems to be valid. The pattern doesn't seem to work as expected. I have only tested it in Firefox so far. Is there ...

regexhtmlcsssmarty

Chrome Bug with Fixed Position Background

Just finished creating a website that features fixed images as backgrounds with text scrolling on top of them. I've noticed an issue when using Chrome - the scrolling stops briefly between backgrounds, pauses for about a second, and then resumes. I&ap ...

htmlcssgoogle-chromescroll

Navigating to an offline HTML webpage using JavaScript in a PhoneGap application

I am currently developing a phonegap application. I am attempting to create a login feature where upon clicking the submit button on the Login.html page, I should be directed to a local HTML file. Login.html <tr> <td>&nbsp;</td> ...

javascripthtmlcordova

Creating Images that appear optimized on smaller screens - the art of responsive design!

Currently, I am in the process of working on this test page located at the following link: While the page appears fine on my laptop screen, it is displaying poorly on my phone's browser. The images, in particular, appear disorganized and messy. Coul ...

htmlcssresponsive-design

Incorporating chart.js into a current Django page: a step-by-step guide

I am currently developing a website that includes a feature displaying total hours worked by an employee. I am looking to enhance this function by also showing the hours worked for each day in a month. I have successfully created a chart for this purpose, ...

pythonhtmlcssdjangochart.js

Reversing the order of input-group-addon and input in bootstrap on mobile devices

I attempted to adjust the layout of a bootstrap input-group-addon on mobile devices by using two input elements and manipulating their display and visibility properties. From a design standpoint, I achieved the desired result as the input is now positione ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Materriel-UI ToggleButton has the appearance of a traditional button

Looking to style a ToggleButton like a button? Having trouble with an error in the console when nesting a button inside? Check out this solution: const StyledToggleButtonGroup = withStyles((theme) => ({ grouped: { margin: theme.spacing(0.5) ...

cssreactjsmaterial-ui

How to send information to a modal component in ReactJS?

I'm feeling a bit lost here, maybe I'm missing something. What I am trying to achieve is a loop that populates an array with progress bar elements and then displays them with the relevant information. When a user clicks on a progress bar, the d ...

javascripthtmlreactjszurb-foundation

What is the best way to access the display property of a DOM element?

<html> <style type="text/css"> a { display: none; } </style> <body> <p id="p"> a paragraph </p> <a href="http://www.google.com" id="a">google</a> &l ...

javascriptcssdom

What is the best way to align text above a wrapper box?

After watching a tutorial on YouTube about creating a simple login form, I decided to customize it with some personal touches. I wanted to include a "Welcome" text above the login form, but when using h1, the text appeared next to the box rather than abov ...

htmlcss

Setting a menu item as active in a SvelteKit app: A step-by-step guide

I encountered an issue with the main navigation menu in my sveltekit application. The problem is that when the app is loaded or refreshed, the active menu item corresponding to the current URL is not set. After struggling to find a solution online, I manag ...

javascripthtmlsveltekit

What is the best approach to managing a standard form in React without utilizing AJAX?

Trying to access an endpoint https://api.com/signup.ashx is causing CORS issues. I have been instructed to make the API call without using axios or fetch. Here's what I attempted: const handleSubmit = async (event) => { let error = false ...

javascripthtmlreactjsecmascript-6

A fragmented rendering of a gallery featuring a CSS dropdown menu

Hey there! I'm a newbie coder seeking some assistance. Recently, I stumbled upon a tutorial online that taught me how to create a drop-down menu. However, whenever I hover over "Gallery" on my website, things go haywire and the layout gets all messed ...

htmlcssuinavigationbar