標記段落文本的特定行

給定一個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

標記段落文本的特定行

回答

相關問題