The empty pseudo selector to define the element is empty. DEMO Got Content! HTML <p class= "smile-content" ></p> <p class= "smile-content" > Got Content! </p> CSS .smile-content :before { content : '😄' ; margin-right : 0.3em ; } .smile-content :empty:before { content : '☹️' ; }