Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* Notification badge on icon */ .icon-btn { position: relative; display: inline-block; } .badge { position: absolute; top: -4px; right: -4px; background: red; color: white; border-radius: 50%; width: 18px; height: 18px; font-size: 11px; display: flex; align-items: center; justify-content: center; } /* Floating label on input */ .field { position: relative; } .field input:focus + label, .field input:not(:placeholder-shown) + label { position: absolute; top: -0.5rem; left: 0.5rem; font-size: 0.75rem; background: white; padding: 0 4px; }
Result
Open