html - How to set a padding only for new lines of a textarea (while keeping the line-height constant)?

Question

The goal is to have several lines in an HTML textarea that keep the line-height (e.g. 100%). However, when using enter and going to the next line, there should be a padding.

The suggestion to use line-height:20px; will have an effect on all lines. However, I need only a padding after a line break.

JSFiddle https://jsfiddle.net/9bsu74fw/ ← It does apply the line-height to all lines. Not just the line break.

What is needed:

How to achieve this with CSS?

question from:https://stackoverflow.com/questions/65936221/how-to-set-a-padding-only-for-new-lines-of-a-textarea-while-keeping-the-line-he

Answer 1

You can use ::first-line pseudo selector to apply style on first line only

textarea::first-line {
  line-height: 20px;
}