Css 在所有文本之后绘制不同长度的线，直到块中的特定点

我是CSS新手，一直在寻找这个问题的答案，但尽管我发现了类似的答案，但没有任何东西符合我的情况

我想在一些文本之后，在块中的特定点上绘制不同长度的线

这适用于缩进右类后的数字，即应用于扩展边框底部的填充百分比=右：

<span class="kimmeridgedescription1841">County of<span class="italic"><span class="kimmeridgenameinsert">D</span><span class="indentright46">orset</span></span></span>
<span class="kimmeridgedescription1841">Hundred, Wapentake, Soke or Liberty of<span class="italic"><span class="kimmeridgenameinsert">H</span><span class="indentright01">asilor</span></span></span>

---

我已经在一些不同的浏览器中查看了您的网页。但是我不确定我应该用哪一个。你是什么意思？我想知道的是，有没有一种方法可以在不使用八个不同CSS类的情况下将行扩展到当前的长度？这一直在使用，只是改变了填充的长度。indentright2{padding right:2%；border bottom:1px纯黑；}是的，但在许多浏览器中，行的问题被菜单项全部可见的问题所掩盖。这里是一个截图。我只在Chrome IE和Firefox上试用过。哪些不适用？下拉菜单已经存在很多年了，我没有碰过它。也许已经很多年没用了，但没人说过！对不起，我说了“很多浏览器”，但它似乎包含在Linux下的Firefox和Chrome中（这是我尝试的前两个），然后只包含在这些浏览器的一些版本中。我得再做些测试！

.kimmeridgedescription1841 span.borough { font-style:normal;line-height:0; display:block; text-indent:25px;text-align:left;}
.kimmeridgedescription1841 {margin:auto; font-style:normal;line-height:3;display:block;}
.kimmeridgedescription1841a {margin:auto; font-style:normal;line-height:5;display:block;}
.kimmeridgedescription1841div {margin-left:auto; margin-right:auto; width:450px;}
.kimmeridge1841bracket {
    float: right;
    font-size: x-large;
    margin-right: 25%;
    font-weight: 200;
    margin-top: -5px; }

.kimmeridgedescription1841hr {
    width: 33%;
    border-bottom: black;
    margin-top: -2px;
    margin-right: 50%;
}
.kimmeridgenameinsert {
    border-bottom: 1px solid black; 
    padding-left:2%
}
.indentright01 {
   border-bottom:1px solid black; 
}
.indentright2 {
  padding-right:2%; 
  border-bottom:1px solid black; 
}