html - 标记段落文本的特定行

Question

给定一个 HTML 段落元素(例如，<p>)，其中一些文本运行标有 HTML 标记元素(例如，<mark>)，我想在边距/装订线中放置一条垂直线(不确定是什么最好的词是) 与 <mark> 具有相同的位置和高度.

我做了一个JSFiddle这说明了困境。请注意，绿色垂直线是正确的高度。他们只是在错误的位置。理想情况下，我希望它们一直位于 p 边界的左侧。标签是。

标记不是一成不变的，可以修改。我希望纯粹用 CSS 来做这件事；那是没有 JavaScript。如果无法完成，那么我知道如何使用 JavaScript 来完成。

Answer 1

我已将 p 元素设置为溢出:隐藏，并且背景除最左边的边框外均为白色。

然后，标记上的伪标记具有非常高的宽度，z-index 负值将其放在 p 后面(这样只显示在边框上

div p {
  position: relative;
  padding-left: 25px;
  overflow: hidden;
  background: linear-gradient(to right, transparent 5px, white 5px);
}

div p mark.changed-text {
  position: relative;
  background: none;
  border-bottom: 1px solid blue;
}

div p mark.changed-text::before {
  content: '';
  border-left: 2px solid green;
  position: absolute;
    right: 0px;
    height: 100%;
    z-index: -10;
    width: 1000px;
    background-color: green;}

<div>
  <p>
    Phasellus sed volutpat leo. Suspendisse mi nisi, varius id erat vel, molestie luctus justo. Nulla aliquam vestibulum tellus a sollicitudin. Duis iaculis ut ligula eget semper.
    <mark class="changed-text">Curabitur ullamcorper risus sapien, sit amet mollis lorem finibus eget. Donec imperdiet ac massa in vehicula. Phasellus a lectus sagittis, imperdiet nibh et, vehicula lectus.</mark>
    Donec metus ligula, molestie sit amet sodales et, varius vel lorem. Donec ut ante sit amet velit hendrerit facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi tincidunt turpis sed nulla finibus
    venenatis. Proin viverra venenatis sem, sed elementum sem vestibulum nec. Nulla vitae facilisis nisi, id finibus mauris. Donec volutpat nulla neque, eu laoreet lacus imperdiet imperdiet.
    <mark class="changed-text">Etiam finibus quam urna, ut fermentum tellus scelerisque cursus.</mark> Morbi eu tellus consectetur, varius eros sit amet, interdum mi.
  </p>
</div>