Clear `::after` placeholder after entering content
I have an ::after pseudo element with content set to attr(placeholder) (pulls in string from placeholder attribute ) applied to an empty contenteditable div so that I can display some instructions prior to when the user starts typing . Upon typing some text , I 'd like the placeholder to be removed /hidden but I cannot figure out how to do it . Interwebs suggest chaining with :empty but that does not appear to be an option in styles . Any pointers ? This is related to stuff I 'm exploring re my [toddle RTE ] ( https://discord.com/channels/972416966683926538/1168449588626210876 ) post . I have a few iterations , one using input (which works ) but I 'm working with contenteditable div in this example . @Lucas G - Hopefully this explains it in more detail . Appreciate you taking a look ! 🙂 https://www.loom.com/share/b1affd39cc8f4119a90c56c00fa30c44?sid=74452ccd-be9b-4657-9edb-53b481d61f02 @Tom Ireland
To my project you mean , @Lucas G ? Now you 've got me kinda hooked on this RTE thing lol Literally just found a hacky -ish way around it using :focus-within::after but still not the best . 😄 That sets the placeholder attribute on the input And on input event , the variable is set to false which clears the placeholder Could make it even simpler by just having a placeholder variable with an initial value which gets set to an empty string on the input event
.jpeg/public)