标记段落文本的特定行

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

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

该标记不是石制的，可以修改。我的希望是纯粹做CSS，那就是没有 JavaScript。如果无法完成，那么我知道如何用JavaScript来做到这一点。

来源

2015-12-21 Ryan

无....没有看到这可以做**没有** JS。 –

我很害怕这一点。 – Ryan

我已经设置为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>

来源

2015-12-21 21:01:54 vals

标记段落文本的特定行

回答

相关问题