How to use css to implement same effect as having a
inside target element?

Question

I want all empty

elements in html to have a line break inside it, and use css to make this effect.

Details:

Both of the p tags below should have same appearance (across browsers and zoom levels)

All other customs styles of p tags are same

p:empty {
  /** How can I code here (or some other way css codes can achieve this) **/
}

background: I want to show preview of the editing content inside prosemirror editor, while the editor doesn't preserve inside

when serialize the content to json and make it look different when preview rendered from json. see: discuss.prosemirror

user_9942418 · Answer

There's several ways you could do this, here's how you could it using the same logic behind your own code by simply adding a space Unicode after it's content :

p:empty:after {
  content: '\00a0';
}

p {
  outline: 1px solid red;
}

To demonstrate :

console.log(document.getElementById("first").offsetHeight)
console.log(document.getElementById("second").offsetHeight)

p:empty:after {
  content: '\00a0';
}
p {
  outline: 1px solid red;
}

user_8620333 · Answer

An empty inline-block element can also do the job:

p:empty:after {
  content: '';
  display:inline-block;
}

p {
  outline:1px solid red;
}

Or like below:

p:empty:after {
  content: ' ';
  white-space:pre;
}

p {
  outline:1px solid red;
}

user_3897775 · Answer

You can give the

an explicit height and line-height like this:

p {
  height: 1em;
  line-height: 1em;
}

Working Example:

table, tr, th, td {
  border: 1px solid rgb(191, 191, 191);
}

p {
  height: 1em;
  line-height: 1em;
  text-align: center;
  border: 1px solid red;
}


  
  Column 1
  Column 2
  

  
    
      
      Two
      
      Four
    
    
    
      

      Two
      

      Four

How to use css to implement same effect as having a <br> inside target element?

3 Answers