Disadvantage/Advantage of this solution: This solution will hide the text on focusing the element which is a disadvantage but its more or less a good thing as many peoples use javascript to hide placeholder text on input fields focus.
Details:
1) Content shouldn't be a part of css, hence i moved the content from :before
to data-initial-content
attribute in html.
2) .sud:empty:before
placed the initial content inside before only if the div is empty & when users focuses the div i set :before
to display:none;
using this selector .sud:focus:before
.
3) No need of position: absolute
in this solution.
4) Also added overflow-y:auto
& some padding
for usability & visuals.