Expand CSS starting from the center to a specific width

I'm currently working on a hover effect that is functioning properly. However, I am attempting to set a fixed width for the blue line, such as a maximum width of 100px. Whenever I try to modify the code below by adding the width constraint, the animation stops working and the growth does not occur from the center.

Does anyone have suggestions on how to adjust the code so that it smoothly animates from the center to a fixed width?


                body {
                    width:100%;
                }
                
                div {
                    display:block;
                    position:absolute;
                    top:45%;
                    left:50%;
                    border-bottom:4px solid blue;
                    width:0%;
                    text-align:center;
                    animation: line 2s linear forwards;
                }
                
                @keyframes line {
                    from {
                        left:50%;
                        width:0%;
                    }
                    to {
                        left:5%;
                        width:90%;
                    }
                }
            
<div>Heading</div>

htmlcssanimation

Answer №1

Unique Solution 1

If you want to limit the width of an element, consider adding a span inside:

body {
  width: 100%;
}

div {
  display: block;
  position: absolute;
  top: 45%;
  left: 50%;
  width: 0%;
  animation: line 2s linear forwards;
}

.heading {
  display: block;
  text-align: center;
  max-width: 200px;
  border-bottom: 4px solid blue;
  margin: 0px auto;
}

@keyframes line {
  from {
    left: 50%;
    width: 0%;
  }
  to {
    left: 5%;
    width: 90%;
  }
}
<div><span class="heading">Heading</span></div>

Unique Solution 2

Avoid using absolute positioning for centering elements in your layout:

div {
  display: block;
  width: 0%;
  animation: line 2s linear forwards;
  text-align: center;
  max-width: 200px;
  border-bottom: 4px solid blue;
  margin: 0px auto;
}

@keyframes line {
  from {
    width: 0%;
  }
  to {
    width: 90%;
  }
}
<div>Heading</div>

Answer №2

If I were to enhance the design, I would opt for using the :after pseudo-element instead of directly adding a border to the element itself. Additionally, I have shortened the animation duration as it appeared slightly lengthy:

body {
  width:100%;
}

div {
  display:inline-block;
  position:absolute;
  top:45%;
  left:50%;
  text-align:center;
}
  div:hover:after {
    content:"";
    display:block;
    width:0;
    margin:0 auto;
    height:4px;
    background:blue;
    animation:line .5s linear forwards;
  }

@keyframes line {
  from {
    width:0%;
  }
  to {
    width:100%;
  }
}
<div>Heading</div>

You can achieve this effect without utilizing keyframes by employing the following approach:

body {
  width:100%;
}

div {
  display:inline-block;
  position:absolute;
  top:45%;
  left:50%;
  text-align:center;
}
  div:after {
    content:"";
    display:block;
    height:4px;
    background:blue;
    width:0;
    margin:0 auto;
    transition:.5s all;
  }
  div:hover:after {
    width:100%;
  }
<div>Heading</div>

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

Fade in and out of page or div elements with a simple click

I've been dedicating some time to my recruitment website lately. As a beginner in coding, I'm looking for a script that will automatically fade out the Employment review content when clicking on each employment vacancy div and then fade back in w ...

javascriptjqueryhtmlcss

Menu made of Angular material card located in the upper right corner

Is there a way to add a menu at the top right of a card using Angular Material? The documentation does not mention a specific tag for this feature. https://i.sstatic.net/FEf40.png I am looking to include a button with an icon at the top right corner, sim ...

htmlcssangularangular-materialangular10

Exploring the Fusion of GLTF Animations within Three.js in an Angular Environment

Currently, I am diving into an Angular project and have scoured the internet for solutions without any luck in determining a way forward. The challenge at hand involves 3 GLTF files portraying different facial expressions of a model (smiling, crying, laugh ...

angularanimationthree.jsblendergltf

Is there a way to adjust the placement of this AccordionDetails utilizing Material UI's Grid system?

Here is a sketch of what I am aiming for: https://i.sstatic.net/SFHSpm.png This is my implementation using Material UI's Accordion component. https://i.sstatic.net/JyhCym.png Below is the code snippet for the AccordionDetails section, which is whe ...

cssreactjsmaterial-ui

Removing border of the top and bottom of jspdf pages

In my project, I am utilizing a combination of html2canvas, canvg, and jspdf to convert HTML content (which includes SVG graphs) into canvases for the purpose of creating a PDF file. To address some page-break issues, I have resorted to creating multiple c ...

javascriptcsshtml5-canvasjspdfhtml2canvas

The CSS code hides a portion of the fixed side navigation when the main content is shorter than the navigation bar

My side nav and main content are both dynamic. The issue arises when the navigation is longer than the main content, causing its height to be set to the viewport height and the rest is hidden. How can I address this problem without resorting to an unsightl ...

javascriptjqueryhtmlcss

What could be causing a specific CSS class to not take effect?

Recently, I embarked on a journey to learn Django framework with Python. My main source of knowledge is a course I found on YouTube. However, I encountered an issue where the CSS and JS features were not applying to my page as demonstrated in the course. ...

cssdjangobootstrap-4

Tips for including a footer element in React:How can a footer division be

I need help with implementing a footer in my React web app. Currently, the body section in index.html looks like this: <body> <div id="root"></div> <script src="index.js"></script> </body> Inside index.js, the rend ...

javascripthtmlreactjs

"Blank Canvas: Exploring the Void in Laravel Blade Templates

This is the route that I am using Route::get('login', function(){ return View::make('admins.login'); }); In this code, I have created a admins/login.blade.php file to handle the login view. <!doctype html> <html> < ...

phphtmllaravellaravel-4laravel-blade

Switch the color (make it gray) of the selected tab in the navigation bar

<!-- Customizing the Navbar --> <nav class="navbar navbar-expand-sm bg-primary navbar-dark"> <a class="navbar-brand" href="<?php echo base_url('Controller_dashboard'); ?>"><strong>StuFAP MS</strong></a> ...

htmlcsssyntaxbootstrap-4

Fade out with CSS after fading in

After setting an animation property on an HTML element to display it, I want the same animation in reverse when a button is clicked to hide it. How can I achieve this effect? "Working Animation": .modal { animation: myAnim 1s ease 0s 1 normal fo ...

htmlcss

Creating a progress bar with blank spaces using HTML, CSS, and JavaScript

Upon running the code below, we encounter an issue when the animation starts. The desired effect is to color the first ten percent of the element, then continue coloring incrementally until reaching 80%. However, as it stands now, the animation appears mes ...

javascriptcsshtml

Tips for designing a unique CSS ellipse effect for text styling

Hey there! I have a list of titles in a drop-down menu as strings, for example: "Bharat Untitled offer #564", "Bharat Untitled offer #563" The titles are quite long, so we want to display the first eight characters, followed by '...' and then ...

javascriptcss

Creating header menus with section labels in Windows 8 Metro can be easily accomplished by utilizing Javascript

Is there a way to create a navigation menu in Windows 8 Metro JavaScript that includes header menus and section labels, similar to the example shown below? ...

javascripthtmlmicrosoft-metrowinjs

A Guide to Modifying Background Image Attribute using JavaScript

I am currently in the process of changing an attribute of a JavaScript variable from url("../images/video.png") (as declared in the CSS) to url("../images/pause.png") using this line of code: fullscreenPlayPauseButton.style.backgroundImage = "url("../imag ...

javascriptcssimage

What are some techniques to ensure a bookmark retains its original style even when the cursor hovers over it?

My CSS skills are limited, so I am facing what may seem like a basic issue. On my website, I have a table of contents with links structured like this: <a href="#user-interface">User interface</a> Additionally, there is a bookmark in another ...

htmlcsshyperlinkstylesheet

What could be causing my HTML email to appear distorted when viewed in Gmail?

After spending the last 6 hours tackling this issue, I am still stuck. Despite my extensive googling, it seems that divs are supposed to work in emails post-2017. All the online HTML email testers I have used indicate that my email layout is perfectly fine ...

htmlcssemailgmail

Switching the menu based on screen size successfully functions for the div element, however, it does not

Currently, I am working on creating a responsive menu. The structure of my menu is set up as follows: HTML: <ul id="top-menu"> <li class="active"> <a href="#">HOME</a> </li> <li> <a href="#div2">ABOUT</ ...

htmlcssmedia

Persistent hover state remains on buttons following a click event

In my current project, I am dealing with a form that has two distinct states: editing and visible. When the user clicks on an icon to edit the form, two buttons appear at the bottom - one for saving changes and one for canceling. Upon clicking either of th ...

javascriptangularjscsstwitter-bootstrap-3hover

Display the header of the table after a page break in HTML using CSS

I have a unique question that is somewhat similar to others I've come across, like CSS: Repeat Table Header after Page Break (Print View). The difference in my question lies in the need for handling multiple headers. My query is about displaying the ...

phpjqueryhtmlcssprint-preview