我正在尝试将行号添加到行高不等的现有 html - 许多类型的字体大小和图像。 每行看起来像 -
<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>
有没有简单的方法来添加垂直对齐的行号？ 谢谢
最佳答案
灵感来自 this问题，我已经为你的问题开发了一个解决方案。您可以使用 counter-reset and counter-increment property实现这一点
<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>关于html - 向现有 HTML 添加行号，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43110136/