Steps for modifying the width of a horizontal line element so that it aligns with an input element

Question

Steps for modifying the width of a horizontal line element so that it aligns with an input element

I'm attempting to dynamically adjust the hr element's length based on the length of the input element by using CSS.

Additionally, I'd like to incorporate an animation that triggers when the input is focused.

I came across a solution for the h2 element on stackoverflow: How to do it with h2 element

Here is the code snippet:

h2{
  font-size:50px;
  padding:0 25%;
  text-align:center;
}


h2 hr{ width:100%;height:10px;background:#000;}

<h2>
This is a very big title
<hr />
</h2>

I tried implementing a similar approach for the input element, but without success.

My Attempted Code:

hr.underline {width: 0%;}


input.input:focus hr.underline{
    left:0;
    width:100%;
    height:2px;
    background-color:#17e13f;
    border:none;
    margin-top:5px;
    margin-left:0;
    margin-bottom:0px;
}

<div>
        <label for="1">Input</label>
        <input class="input" type="text" id="1">
            <hr class="underline">
        </input>
    </div>

However, this method doesn't seem to be working as expected. Does anyone have suggestions on how to achieve this, or perhaps a better alternative?

html css

Answer 1

Answer №1

Your closing input tag is incorrect; the input tag is self-closing. Solution: Use max-content on the parent div, then apply width:100% to .underline when focused, making it 100% of the parent element. Include

transition: width 0.25s ease-in-out;

for a smooth animation.

    div{
        display:flex;
        gap:5px;
       }
    span {  
        display:inline-block;
        width: max-content;
        
    }
    
    .input:focus~.underline {
        width: 100%;
    }

    .underline {
        height: 2px;
        border: none;
        background-color: #17e13f;
        width: 0%;
        transition: width 0.25s ease-in-out;
    }

<div>
        <label for="1">Input</label>
        <span>
        <input class="input" type="text" id="1">
        <hr class="underline">
        </span>
        
</div>

Answer 2

Your closing input tag is incorrect; the input tag is self-closing. Solution: Use max-content on the parent div, then apply width:100% to .underline when focused, making it 100% of the parent element. Include

transition: width 0.25s ease-in-out;

for a smooth animation.

    div{
        display:flex;
        gap:5px;
       }
    span {  
        display:inline-block;
        width: max-content;
        
    }
    
    .input:focus~.underline {
        width: 100%;
    }

    .underline {
        height: 2px;
        border: none;
        background-color: #17e13f;
        width: 0%;
        transition: width 0.25s ease-in-out;
    }

<div>
        <label for="1">Input</label>
        <span>
        <input class="input" type="text" id="1">
        <hr class="underline">
        </span>
        
</div>

Steps for modifying the width of a horizontal line element so that it aligns with an input element

Answer №1

Similar questions

Adjust the baseline of text in <li> elements by shifting it 2 pixels upwards

Issue with scrolling to the bottom of collapsed sections in Bootstrap

PHP prepared statements do not seem to be effectively updating or inserting entire datasets

Embedded Youtube code saved in database is not displaying on HTML form

What is the method for importing .scss files throughout a Next.js application?

What is the most effective way to align a thumb to the left and content to the right?

Included Image Hyperlink with Limited Clickability in HTML

Avoid automatic background resizing to match the full width of the header text

At what point does the browser begin fetching the background images specified in a stylesheet?

Mobile devices seem to be constantly refreshing website images

Issue with the Z-Index property not functioning as expected on unordered lists within a dropdown menu

Utilizing the hcSticky plugin for creating a scrolling effect on webpage content

Issues with modals appearing improperly after transitioning to NG-Bootstrap 15 and Bootstrap 5 upgrade

Conceal the Div containing the specified class

Steps to create a clickable drop-down arrow with a label

perfecting the animation of popovers

Flip the Script: JQuery slideshow in reverse

When CSS Display table is resized at media query breakpoints, it causes other cells to disappear

How do I insert a new column for the Name attribute in ASP.NET Core Identity without using the Username field?

Creating an event within a class that is generated dynamically when hovering