How can I underline all rows in textarea?

Question

How can I underline all rows in textarea?

I need in something like this.

P.S. Textarea has style padding: 10px

I can\'t you background,

Answer 1

Universal solution

1. Create two divs with the same styling.
2. First div is a "mirror" div with color: transparent; position: absolute.
3. Second div is contenteditable="true", with injected span elements.
4. Add any border-bottom and padding-bottom

Live Demo

CodeSandbox editor (using Vue, but easy to port to anything else)

Note: Please be careful with contenteditable and make sure you secured it from XSS attacks.