Line-By-Line CSS

I want to make my paragraphs look like a ruled notebook. Right now, I have the current code:

p {
    border-bottom: 1px solid #efede3;
}

However, it didn’t go as expected when it comes to the line breaks. It only adds a rule after the paragraph.


How do I add CSS to each line instead of each paragraph?

Dunno if this is an outdated approach, but I think you’d set a repeating background image and then set the line-height to match up with how far apart the lines are in the background.

And then what do you do if they’re offset? Maybe play around with the padding to get it lined up.

You also have margins around the paragraphs and other various vertical spaces, which you’ll probably have to adjust so that everything stays on a multiple of that line height.

1 Like

You could try this repeating linear-gradient trick and tweak the background-size property to make the lines the right height?

background-color: #fff;
background-image:
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;

Source (and live editor): https://projects.verou.me/css3patterns/#lined-paper

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.