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?
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?
1 Reply
instead of using left, use right