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.