I want to style an input by adding an dot at the end of it. Same As The Image Below
I've Tried To add some styling for :before :after but i couldn't figure it out
.parent {
max-width: 352px;
width: 100%;
}
.children {
display: flex;
align-items: center;
width: 100%;
margin: 10px 0;
}
.line {
width: 100%;
height: 1px;
background-color: red;
}
.the-dot {
width: 1px;
height: 1px;
background-color: red;
border-radius: 999px;
}
.children input {
border: none;
border-bottom: 1px solid;
margin-right: 5px;
flex-grow: 1;
}
<div class="parent">
<div class="children">
<input type="text" placeholder="Type something...">
<div class="line"></div>
<div class="the-dot"></div>
</div>
</div>
Without using flex and nesting the dot inside the line I ended up to this:
.parent {
max-width: 352px;
width: 100%;
}
.line{
width: 100%;
height: 1px;
background-color: black;
margin-top:15px;
display:block;
}
.the-dot {
width: 8px;
height: 8px;
background-color: red;
border-radius: 50%;
display:inline-block;
float:right;
margin-top:-4px;
}
input {
width:100%;
display:block;
border: none;
border-bottom: 1px solid;
outline:0;
border:0;
}
<div class="parent">
<input type="text" placeholder="Type something...">
<div class="line"><div class="the-dot"></div></div>
</div>