Line-By-Line CSS

Coding Help
1

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.

image
image707×273 11.8 KB

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

2

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
3

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

4

There is no pure CSS way to style a specific line (except for the first line). The best CSS only alternative would probably involve the background-image property, as already described.

If you are okay with using JavaScript, I would personally use that to split each line into span elements. This way you would also be able to target specific lines, if you should need it at some point.

It would then end up looking something like this:

https://jsfiddle.net/4bgktzm5/

5

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