Question

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

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

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

Answer 1

我设置为p元素溢出：隐藏，背景全白，除了最左边的边框。

然后，标记上的伪具有非常高的宽度，并且z指数为负，将其置于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>

标记段落文本的特定行

1 个答案: