Menu
I'm trying to add line numbers to existing html with unequal line height - many types of font size and also images. each line look like -
<div id="1"><right><span>line 1</span></right></div>
<div id="2"><right><span>line 2</span></right></div>
<div id="3"><right><span>line 3</span></right></div>
is there simple way to add line numbers that will be vertically align? thanks
663
Style the Textarea We can use the built-in counter function in CSS in combination with counter-increment to add the line numbers. The counter function expects an arbitrary name that we define for counter-increment . This is going to add the content inside a ::before pseudo-element.
To add a line break to your HTML code, you use the <br> tag. The <br> tag does not have an end tag. You can also add additional lines between paragraphs by using the <br> tags.
To do a line break in HTML, use the <br> tag. Simply place the tag wherever you want to force a line break. Since an HTML line break is an empty element, there's no closing tag.
By inspiring from this question, I have developed a solution for your question. You can use the counter-reset and counter-increment property to achieve this
<html>
<head>
<style>
.container {
counter-reset: line;
}
.container .lineNum {
display: block;
line-height: 1.5rem;
}
.container .lineNum:before {
counter-increment: line;
content: counter(line);
display: inline-block;
margin-right: .5em;
}
</style>
</head>
<body>
<div class="container">
<div id="1" class="lineNum"><right><span>line 1</span></right></div>
<div id="2" class="lineNum"><right><span>line 2</span></right></div>
<div id="3" class="lineNum"><right><span>line 3</span></right></div>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
