How to add an empty line in css

Question

I want to add an empty line above span tag in css using :before attribute like this.

______

 Hi

I've tried using border-top for span tag. But that's not my requirement. I searched and tried but didn't work. Please help.

Answer 1

If you are set on using the :before attribute, see below:

span:before {
  content: '';
  width: 100%;
  height: 1em;
  display: inline-block;
  background: red; /* Remove, just showing empty line */
}
span {
  display: inline-block; /* Can remove if span:before width doesn't matter. */
}

<span>Test Text</span>

If you're open to using something a bit simpler, try using margin-top by using the following code:

span {
  margin-top: 1em; /* Adjust to your liking */
  display: block; /* Could also use inline-block */
}

<span>Test Text</span>

Answer 2

Use display: block and margin-top: 1em. <span> is an element with a default display value of inline. You should use a div or set the display to block.

em equals to the font size, so it should do the work for the margin-top

HTML

<span class="example">Hi</span>

CSS

.example{
  margin-top: 1em;
  display: block;
}

Answer 3

span:before {
  content: "\a";
  white-space: pre;
}

<span>Hi</span>