Identify certain lines from the paragraph text

Suppose you have an HTML Paragraph Element (e.g., <p>) with certain text sections highlighted using a HTML Mark Element (e.g., <mark>). I am interested in adding a vertical line in the margin or gutter (uncertain about the appropriate term) that aligns with the position and height of the <mark>.

I created a JSFiddle to demonstrate the issue. The green vertical lines are currently displaying at the correct height but are not positioned correctly. My goal is to have them aligned all the way to the left, following the border of the p tag.

The HTML markup can be adjusted as needed. I prefer achieving this effect using only CSS, without relying on JavaScript. However, if it proves impossible through CSS alone, I am capable of implementing it using JavaScript.

htmlcss

Answer №1

I've styled the p element with overflow:hidden and a white background except for the left border.

Additionally, I've used pseudo to create an effect where the width is very high and the z-index is negative to place it behind the p element, making it only visible on the border.

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Position an element to the right inside its parent container with varying width in Internet Explorer 7 or earlier

I am trying to align a button to the right edge of a table inside a container-div that has no set width. The goal is to have the button float on the right side of the table, lining up with its right edge. While my current approach works in most browsers, i ...

htmlcss

several tables all set to the identical TD width

Using a css sheet, I have formatted two tables. The first table is used for filter/sort selection, while the second table is a scrollable data table. div#scrollTableContainer { width: auto; margin: 20px; /* just for presentation purposes * ...

htmlcsshtml-table

What's the best way to make sure my table fits perfectly within its container's width?

I've encountered an issue with a table: If you want to see how the table was created, check it out on jsFiddle I attempted to modify the CSS like this : table{ width:100%; } td span { float:right; width:20%; text-align:center ...

jqueryhtmlcsstwitter-bootstrap

The Parallax effect reference hook does not seem to be functioning properly with components in NextJs

I'm attempting to implement the useParallax hook on an element within my JavaScript file. My setup involves NextJs, ReactJs, and styled components. Here is how I integrated the hook: Mainland.js import React, { useEffect, useRef } from 'react&ap ...

htmlreactjsreact-hooksnext.jsuse-ref

Having difficulty aligning the container div in the center

I'm trying to create a centered grid of full-width buttons, but for some reason, I just can't seem to get the container centered. Any suggestions? Check out the code here - https://jsfiddle.net/a6qo6tzL/ Thank you! <div class="Wrapper"> ...

htmlcsscentering

Steps for creating a PDF file from an HTML page using JavaScript coding

I'm developing an HTML5 hybrid iPad app and need to create a PDF file of a report generated on one of the pages. I would like to save this PDF on the iPad. Can you provide assistance with achieving this task? I am utilizing JavaScript and mobile jQuer ...

javascriptjqueryhtmlmobilejquery-mobile

Use JavaScript to identify and color the intersecting area of two triangles that overlap on a webpage

I created two triangular divs using HTML and I am utilizing jQuery UI to enable them to be draggable. Now, my goal is to overlap these two triangles and change the color of the overlapping area to a different shade. Here is an example: https://i.sstatic. ...

javascriptjqueryhtmlcss

Update the text content in the specific span element when the class attribute matches the selected option in the

How can I dynamically update text inside a span based on matching classes and attributes without hardcoding them all? An ideal solution would involve a JavaScript function that searches for matches between span classes and select field options, updating t ...

javascriptjqueryhtmldrop-down-menu

The Twitter widget is not staying in sync with the rest of the page when scrolling on

Twitter provides a widget that is widely used by many people. Below is the code provided by Twitter: <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({ version: 2, type: 'profile', ...

htmlcssinternet-explorerscroll

The styling for material UI's default endAdornment is lacking accuracy

My Autocomplete component from material UI v5 includes a default endAdornment icon. However, the icon appears to have the CSS property top:unset, causing it to be styled incorrectly. Here is the code for rendering the Autocomplete: <Grid item xs={3}> ...

cssreactjsmaterial-ui

Fluid Grid design showcasing a gap on the right side

After working on the Skeleton Framework and making adjustments to the grid design, I am facing a small gap issue on the right side. Despite things slowly falling into place, this minor gap is causing confusion. Please refer to the image below for clarifica ...

javascripthtmlcssframeworksresponsive

Using a personalized function in JQuery

I need to execute a JavaScript function I created after a JQuery event has been triggered. The function in question is called scrambleDot, and I defined it previously like so:var scrambleDot = new function() { //my code }. Here's the attempted implem ...

javascriptjqueryhtmlfunctionoop

Wrapping is disabled for all elements within the container div that contains three additional div elements

I am trying to prevent one of the three divs inside a fixed top navbar container from sliding underneath another, causing the navbar to become taller. The code below is using Bootstrap and the issue is with the navbar-header div sliding underneath the he ...

csshtmltwitter-bootstrap

center the view on the specified element

Utilizing ReactJs, I am developing a horizontal timeline that showcases dates. For instance, there is a list of 100 elements, each containing a date and text content. The dates are displayed horizontally using flex-direction="row" and overflowX ...

javascripthtmlcssreactjs

Steps to create two jQuery dropdown filters for multiple identifiers:

Is it possible to create two dropdown menus that can be used to filter a gallery of images? I am currently facing an issue where the filtering functionality is not working after adding a name attribute to the image IDs. When I select an option from the s ...

javascripthtmljquery

Incorporate a link to an image following a click event toggle using Jquery

I managed to create a code snippet that toggles between two images when clicked, thanks to some assistance from stackoverflow. However, I am now looking to add a link to the second image that redirects users to another webpage, like The App Store. My ques ...

javascriptjqueryhtmlcsshyperlink

Guide on submitting a get form and retrieving the information

Currently, I am employed as a penetration tester for a company. While conducting an analysis of their website, I discovered a vulnerability where CSRF tokens are generated via a GET request to the page localhost/csrf-token and then provided in plaintext fo ...

javascriptphpjqueryhtmlcurl

When using html-pdf-chrome to print to an A4 PDF, there appears to be a significant space below the A

In my Laravel project, I am currently utilizing the westy92 / html-pdf-chrome library to convert HTML to PDF. The front-end of my project is based on React. I have defined a series of divs to act as A4 pages: <div id="pdf" className="pri ...

phphtmlcssreactjspdf

Are certain browsers unable to play dynamically generated HTML5 audio files?

While working on my project, I encountered an issue with creating and controlling an audio element in JavaScript. The element works perfectly fine in Firefox, Chrome, and Opera; however, it fails to function properly in IE and Safari. In these browsers, ...

javascripthtmlaudio

Building a loading bar using dots

<span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot">< ...

javascriptjqueryhtmlcss