CSS Placeholder Text
Fri, Mar 10, 2017
How can you find all empty elements on a web page and populate them with placeholder text?
My first thought was to use JavaScript, loop through each element, and populate the empty ones. This approach works, but CSS provides a simple solution.
*:empty::before{
content: "Please Add Information";
}
Using the empty selector and the pseudo element before, placeholder text can be defined using the CSS content
property. The :before
element is used because the content
property only works with pseudo elements.
My Use Case
I am working on an application that allows researchers to create and manage personas.
- To create a new persona a user enters data into a form.
- A page is generated for each persona that displays their associated data.
Because research is an ongoing process, not all of the data fields are filled when a persona is created. Because of this, certain persona pages had a number of blank sections. Instead of hiding blank sections, I used CSS to insert a “call to action” that prompted researches to update personas with their latest findings.
See the Pen Placeholder Text Using CSS by Alex Katz (@katzkode) on CodePen.