Every time a rails variable is nil (or when using rails code (as seen in the third code example)), my html displays a string of empty characters.
new.html.haml
%h1.editable.editable_title_field{:contenteditable => 'true', :placeholder => "title"}
= @post_title //@post_title.present? returns false
%h4.editable.editable_subtitle_field{:contenteditable => 'true', :placeholder => "subtitle"}
= @post.subtitle
%p.editable.editable_intro_field{:contenteditable => 'true', :placeholder => "intro"}
= @post.intro
This issue is illustrated in the code examples below:
After inspecting, I also attempted:
%h1.editable.editable_title_field{:contenteditable => 'true', :placeholder => "title"}
- @post_title
and:
%h1.editable.editable_title_field{:contenteditable => 'true', :placeholder => "title"}
-
The end result is identical to what is shown in the provided image.
Due to these empty characters, the :empty CSS selector treats the element as non-empty and does not apply content specified in :before.
How can I eliminate these empty characters within my HTML tags?
EDIT
View a screencast demonstrating this behavior: