Is there a way to make css underline by every line? [duplicate] - css

Question

This question already has answers here:
Underline several lines of text + underline to be full width + responsive
(1 answer)
Need to display multiline text with underlining lines of equal length
(5 answers)
Closed 10 months ago.
I'm making hexo blog theme. I'am trying to make line note like style. I want to make css on each line has underline(not like U tag)
want
But if I use border-bottom: 1px solid grey
real

Answer 1

You may also use a gradient to draw a grid below your text.
It has to match the line-height
Here an example with CSS var() to ease the tuning.
p, textarea {
--lineH: 1.6em;
line-height: var(--lineH);
padding:var(--lineH);
padding-block:0;/*reset to set first line right at top */
background:repeating-linear-gradient(to bottom, transparent 0 1.4em, gray 1.4em calc(1.4em + 2px), transparent calc(1.4em + 2px) 1.6em) 50% 0 / calc(100% - var(--lineH) * 2 ) 100% no-repeat ;
}
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<textarea placeholder="Type your texts here"></textarea>
Added a textarea to the example to show another possible use.
ressources if you need them
https://developer.mozilla.org/en-US/docs/web/css/gradient/repeating-linear-gradient
https://developer.mozilla.org/en-US/docs/Web/CSS/var
https://developer.mozilla.org/en-US/docs/Web/CSS/background
https://css-tricks.com/a-complete-guide-to-calc-in-css/
you can use more gradients to mimic a full note sheet https://codepen.io/gc-nomade/pen/bGLGNWB

Answer 2

You can use text-decoration: underline to get that effect (although the text-underline-offset style rule which is used to space the line from thee normal position is NOT supported in IE at all and some other browsers are a bit spotty with it). The only other way to do it is to split the content into spans and apply the border bottom or ::after pseudo-element to each span.
p {
font-size: 14px;
font-weight: 400;
line-height: 32px;
text-decoration: underline;
text-underline-offset: 4px;
}
<h2>Hello world<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed mauris a metus ultricies sagittis commodo sed tellus. Cras sodales nunc ut neque feugiat dignissim. Nullam ligula mauris, blandit eu dignissim at, rutrum vitae nisi. Proin facilisis massa vel elit fermentum, sit amet aliquam quam hendrerit. Aenean interdum nisi a metus consequat, vitae viverra ligula scelerisque. Sed in erat dictum, dapibus arcu quis, interdum orci. Suspendisse sit amet gravida purus, eu facilisis felis. Aliquam consectetur dapibus augue a suscipit. In semper pretium erat. Duis eget sollicitudin arcu, volutpat scelerisque est. Proin nisl nisi, tincidunt a justo id, lobortis tempor lacus. Quisque eu tincidunt ex.</p>

Answer 3

The p tag is a block element. Means if you assign a border the border would be assigned for the block. If you change p tag to an inline element then the border would be displayed like you want.
Update
with inside underlined words
p {
display: inline;
border-bottom: 1px solid grey;
}
p span {
text-decoration: underline;
color: red;
}
<h2>Hello world<h2>
<p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing</span> elit. Duis sed mauris a metus ultricies sagittis commodo sed tellus. Cras sodales nunc ut neque feugiat dignissim. Nullam ligula mauris, blandit eu dignissim at, rutrum vitae nisi. Proin facilisis massa vel elit fermentum, sit amet aliquam quam hendrerit. Aenean interdum nisi a metus consequat, vitae viverra ligula scelerisque. Sed in erat dictum, dapibus arcu quis, interdum orci. Suspendisse sit amet gravida purus, eu facilisis felis. Aliquam consectetur dapibus augue a suscipit. In semper pretium erat. Duis eget sollicitudin arcu, volutpat scelerisque est. Proin nisl nisi, tincidunt a justo id, lobortis tempor lacus. Quisque eu tincidunt ex.</p>
p {
display: inline;
border-bottom: 1px solid grey;
}
<h2>Hello world<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sed mauris a metus ultricies sagittis commodo sed tellus. Cras sodales nunc ut neque feugiat dignissim. Nullam ligula mauris, blandit eu dignissim at, rutrum vitae nisi. Proin facilisis massa vel elit fermentum, sit amet aliquam quam hendrerit. Aenean interdum nisi a metus consequat, vitae viverra ligula scelerisque. Sed in erat dictum, dapibus arcu quis, interdum orci. Suspendisse sit amet gravida purus, eu facilisis felis. Aliquam consectetur dapibus augue a suscipit. In semper pretium erat. Duis eget sollicitudin arcu, volutpat scelerisque est. Proin nisl nisi, tincidunt a justo id, lobortis tempor lacus. Quisque eu tincidunt ex.</p>

Answer 4

try this :
text-decoration: underline;
text-underline-offset:6px;

Answer 5

Have you tried using the text-decoration-line property.
text-decoration-line: underline;
https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-decoration-line