Make absolute positioned element expand to the right (css)
I have a problem positioning an element.
HTML and CSS is abstracted as follows:
//HTML
<div class="container">
<button>{icon}</button>
<div class="badge">{content}</div>
</div>
//CSS
.container{
position: relative;
}
.badge {
position: absolute;
top: -8px;
right: -8px;
display: flex;
align-items: center;
justify-content: center;
min-width: .5rem;
height: .5rem;
padding: .5em;
border-radius: 100vh;
}
If the content of the badge is more than one character, I want the element to expand to the right instead of the current left. How can I achieve this?
HTML and CSS is abstracted as follows:
//HTML
<div class="container">
<button>{icon}</button>
<div class="badge">{content}</div>
</div>
//CSS
.container{
position: relative;
}
.badge {
position: absolute;
top: -8px;
right: -8px;
display: flex;
align-items: center;
justify-content: center;
min-width: .5rem;
height: .5rem;
padding: .5em;
border-radius: 100vh;
}
If the content of the badge is more than one character, I want the element to expand to the right instead of the current left. How can I achieve this?
