I am looking to create an animated border effect. When hovering over the link, I want the border-bottom to extend seamlessly from left to right. After much searching, I am still unsure what this effect is called.
Below is the code I have:
.a{
width: 200px;
display: inline-block;
transition: 0.5s all;
}
.a:hover{
border-bottom: 5px solid #037CA9;
}<a>Username:</a>How do I style this element so that the border extends smoothly from the left to the right side?
If you're looking to add a stylish underline effect to your links, consider using a positioned pseudo-element.
a {
text-decoration: none;
position: relative;
}
a::before {
content: '';
position: absolute;
background: red;
height: 2px;
top: 100%;
left: 0;
width: 0%;
transition: width 0.5s ease;
}
a:hover::before {
width: 100%;
}<a href="#">Username:</a>One trick is to utilize a pseudo element scaled down to 0.001 and then scale it back to 1 when hovered over. This technique is explained in another related question: Expanding border from center on hover
If you want the expansion to occur from the left side, simply adjust the transform origin to 0 0 :
a{
display:inline-block;
}
a:after {
display:block;
content: '';
border-bottom: solid 3px #019fb6;
transform-origin:0 0;
transform: scaleX(0.001);
transition: transform 250ms ease-in-out;
}
a:hover:after {
transform: scaleX(1);
}<a>Username:</a>It appears that you are aiming to achieve a similar effect as demonstrated in the fiddle below.
I have created a small sample with a styled <a> element and utilized the pseudo-element <a>, adding a transition to expand it upon hovering.
a {
position:relative;
display:inline-block;
padding:5px 10px;
color:#444;
background:#f3f3f3;
text-decoration:none;
}
a:after {
content:'';
position:absolute;
background:green;
display:block;
height:2px;
bottom:-2px;
left:0;
min-width:0;
transition:all .2s linear;
-webkit-transition:all .2s linear;
}
a:hover:after {
min-width:100%;
}<a href="#">Hover button</a>You may want to consider incorporating additional CSS transitions specific to various browsers for better compatibility. For further information on this, refer to this link.
To create a line extending from the center, follow these steps:
a {
position: relative;
text-decoration: none;
}
a:after {
content: '';
background: #2a57b3;
display: block;
height: 2px;
position: absolute;
left: 50%;
bottom: 0;
width: 0;
-webkit-transition: all .2s;
transition: all .2s;
}
a:hover:after {
width: 100%;
margin-left: -50%;
}<a>Hover over me!</a>Give this a shot.
#container {
position:relative;
top:20px;
height:300px;
}
#container:hover {
position:relative;
top:30px;
height:400px;
}
I found success with this approach.
I have deployed a standard nodejs app (free tier) using cloud shell, but when I try to access https://[ID].du.r.appspot.com/ , it keeps loading indefinitely. app.js: const express = require('express'); const path = require('path'); co ...
Is it possible to ensure that the "cast" text always appears just below the "about" text, regardless of the length of the "cast" content in a top-to-bottom list? If the "about" section can vary in length, how can we make sure that the "cast" section stays ...
I would like to display the export buttons outside of the table. While searching on stackoverflow, I came across an example that uses the Select options method. You can find the example here. If anyone knows how to achieve this, please modify it and shar ...
As I embark on the creation of an HTML and CSS based Gallery, I am eager to make my images more interactive by enabling them to expand into full-screen mode upon clicking. Is it necessary for me to incorporate additional plugins to achieve this functiona ...
In my angular Quiz project, I have a functionality where every user can create quizzes. I want to display all the quizzes that a logged-in user has completed. Here is how I attempted to achieve this: // Retrieving user ID and category ID inside Re ...
Is there a way to dynamically add a task (input + label) for each specific section/div when entering the name and pressing the "Add" button? I attempted to create an event for each button to add a task for the corresponding div of that particular section, ...
Can anyone advise me on how to redirect certain HTML pages to corresponding PHP pages? For instance, if a user lands on www.example.com/sample.html from another website, I want them to automatically be redirected to www.example.com/sample.php without seei ...
Tired of constantly guessing the percentage values to use with a specific number of divs and other elements in my design. I am looking to understand the mathematical calculations that determine the scaling required for different elements in order to main ...
I am having trouble with my JQuery code that checks multiple conditions. No matter what I enter, it always goes to the else condition. $(function() { $('#installment').on("keydown keyup", check); function check() { var inst = Number($( ...
I'm currently facing an issue with rendering an array containing both <p> and <div> items as HTML. Despite my attempts to render them properly, the values appear as plain code instead of formatted paragraphs. To illustrate, let's cons ...
I am searching for a solution to use the same pop-up window whenever it is called. Currently, I need to submit a form into a pop-up window and it works well, except in Chrome iOS where each form submission opens a new tab/window instead of reusing the prev ...
I have a website that consists mainly of an index.html file with a few additional subpages. The index.html file is divided into sections, but the navigation has a fixed position and a height of 100px, which requires a 100px offset for links like <a hre ...
Hi there! I am currently learning the basics of HTML and CSS. I have a question regarding creating a header with no margins on the edges. Any advice would be greatly appreciated as I haven't been able to find a clear solution. Below is my code snippet ...
I checked the input value before submitting it in the form and confirmed that it is correct, returning as a string.enter image description here const saveList = () => { const inputListNameText = inputListName.value; fetch('/api/lists' ...
I've created a webpack script to compile all .scss files into one css file. I decided to use webpack instead of gulp or grunt for simplicity, as it can be configured in a single file. However, I am encountering an issue where scss files are being com ...
Website Elements <td style="font-size:20px;font-family:LucidaGrande,tahoma,verdana,arial,sans-serif;padding:10px;background-color:#f2f2f2;border-left:1px solid #ccc;border-right:1px solid #ccc;border-top:1px solid #ccc;border-bottom:1px solid #ccc; ...
I have been attempting to create an alert pop-up using JQuery that will display when a user clicks on submit without filling out the form. However, when I test my code by leaving the form empty and clicking 'submit', the page just refreshes with ...
In my Python Open-CV project, I am using a matrix obtained from the library: M = cv2.getPerspectiveTransform(source_points, points) However, this matrix is quite different from the CSS Transform Matrix. Even though they have similar shapes, it seems that ...
Having trouble solving a simple problem that seems to have an easy solution. The code I'm working on is meant to display multiple bubbles with similar content, but the text gets distorted due to using strange margin values to fit a specific resolution ...
Currently, I am attempting to display a bootstrap modal with dynamic content. One of the values being passed to the modal is the HTML that should appear inside it. The issue I am facing is that within the HTML content being passed, there is a script tag t ...