How to adjust the width of a horizontal rule element, to an input element-CodePudding

I am trying to automatically adjust the length of the hr element to the length of the input element using CSS.

Also an animation that is executed when the focus is on the input.

I saw this solution on stackoverflow for the h2 element: How to do it with h2 element

Code:

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 have tried it with the input element, but it does not work.

My 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">Eingabe</label>
        <input  type="text" id="1">
            <hr >
        </input>
    </div>

But this wont work. Does anyone know how, or is there a better way to do that?

CodePudding user response：

you are closing your input tag which is wrong input tag is self closing... what if did:using max-content on the parent divthen giving width:100% to .underline on focus which means 100% of the parent. and transition: width 0.25s ease-in-out; for smooth animation.

div {
        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">Eingabe</label>
        <input  type="text" id="1">
        <hr >
</div>