Is it possible to highlight the original 'anchor' or position of an element that has been moved using the float property?

Can the XXX be displayed using a CSS trick without the need for an extra HTML element or container? I attempted to use pseudo-elements and translate, but it was unsuccessful.

p {
background-color: grey;
max-width: 200px;}

small {
float: right;
margin-right: -120px;
width: 100px;
}
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <mark>XXX</mark> <small>This is a sidenote</small>At vero eos et accusam et justo duo dolores et ea rebum.Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

htmlcss

Answer №1

Consider approaching it from a different angle, with the small element serving as the marker and a pseudo element housing the side note text.

Keep in mind the importance of ensuring accessibility.

p {
background-color: grey;
max-width: 200px;}

small {
  background: yellow;
}
small::before {
  content: 'This is a side note ';
  float: right;
  margin-right: -120px;
  width: 100px;
}
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <small>XXX</small>At vero eos et accusam et justo duo dolores et ea rebum.Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

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

Is there a way to verify the presence of data returned by an API?

I am trying to implement a system in my Index.vue where I need to check if my API request returns any data from the fetchData function. Once the data is fetched, I want to return either a boolean value or something else to my Index.vue. Additionally, I wou ...

javascriptcssreactjstypescriptvue.js

CSS Peculiar Black Frame

I've designed a box with a fading background effect. However, I am encountering an odd black border on the right side that I cannot seem to resolve. (The intentional absence of the left border may be causing this issue.) #fadebox { width: 300px; ...

htmlcssbordergradientlinear-gradients

How can I trigger the opening of an iframe without relying on jQuery when the user clicks on it?

I'm looking to create a UI where the user can click on an image and have an iframe appear on top of the image. Instead of using JQuery, I want to stick with pure JavaScript for this functionality. ...

javascripthtmliframe

I am attempting to arrange 9 images in a grid format of 3 rows by 3 columns to create a seamless

I am currently working on setting up a 3x3 grid on my website with 9 images and text underneath. The first 6 images are displaying as I intended, but when I add the last 3 images, the layout gets messed up. The first image jumps under the 3rd image on the ...

htmlcssimage

I must remove the thumb from the input range control

I am looking for a way to remove the thumb from the progress bar in my music player. I have tried various methods without success, and I simply want the progress bar to move forward with color change as it advances based on the Progress variable. For refe ...

htmlcssreactjstypescript

Is it possible to generate a unique name from an array without any repeats?

Update: I am not looking to create a single list, but rather a button that generates a random name when clicked. Objective: Generate a random name from an array by clicking a button. The goal is to display one name at a time randomly without repetition. W ...

javascriptjqueryhtmlarraysrandom

Change the background color of cells according to the value they contain

I have a scenario where I am populating a table with random numbers, and I want the background color of each cell to change based on the value of the number in that cell. Since these numbers refresh periodically, I need the colors to update accordingly as ...

jqueryhtmlcssdynamic-tables

Is it possible to monitor and keep a record of every modification made to an HTML element?

Can anyone suggest an effective method to monitor changes made to an HTML element? I attempted to utilize JavaScript with jQuery but was unsuccessful. $('div.formSubmitButton input[type="submit"]').change(function(event){ alert( ...

javascriptjqueryhtmlcss

A Webpage that is permanently open, with no option to close it. The only option is to watch the video in

Currently, I am designing web pages for artists to showcase their work in an upcoming exhibition. The pages are ready, but now the artists are requesting that each piece be accompanied by a laptop displaying a single webpage with a video providing informat ...

javascriptjqueryhtmlcssbrowser

How can I make an image tag perfectly fit a CSS grid cell without using object-fit?

In this Vue component, the parent element displays 8 instances of these components in a 2x4 grid layout. The issue arises when the image within each component is larger than its container, causing it to not shrink to fit while maintaining the aspect ratio ...

htmlcssvue.js

The functionality of Jquery .slideToggle("slow") seems to be glitchy when used as a table expander

I attempted to implement the .slideToggle("slow"); feature to my table, following the instructions detailed here: W3Schools The toggle effect seems to be functioning, but not as expected. I want the effect to behave similar to the example on the W3School ...

javascriptjqueryhtmljquery-uislidetoggle

Is it possible to merge elements into a carousel in the mobile display?

I have a collection of elements that I would like to combine into a swipeable carousel. Is there a way to achieve this, specifically to make it a carousel only in mobile view? If needed, here is the HTML code. Thank you for your assistance. <div class= ...

htmlcssbootstrap-4slidercarousel

Looking for assistance with creating a responsive design that works seamlessly on all large devices

Our UI/IX designer has provided a design that I need to replicate. https://i.sstatic.net/8nXym.png I am facing difficulties in centering the circular part of the image. (The vertical line and circular part are separate images) I experimented with using ...

htmlcssbootstrap-5

Customized height for vertical Slick slider based on content length

I am facing an issue with my vertical slick slider: $('.slider').slick({ slidesToShow: 3, slidesToScroll: 1, arrows: false, dots: false, infinite: false, centerMode: true, vertical: true, focusOnSelect: true }); .slider { bac ...

jqueryhtmlcssslick.js

Resizing Wordpress images to uniform height within a Bootstrap flex-row with flex-nowrap styling

I have successfully integrated Bootstrap with a Wordpress Underscores Template. My goal is to create a horizontally scrollable container filled with images of equal height. Currently, I am facing an issue where the images within the scrollable container ...

csswordpressimagebootstrap-5image-scaling

Hide Bootstrap columns for Printing

I am currently working on a webpage layout that consists of two columns. <div class="container"> <div class="row"> <div class="col-md-8 "></div> <div class="d-print-none col-md-4"></div> </div ...

cssflaskbootstrap-4

Inspect HTML elements using Jinja2 placeholders

I am a beginner in the world of web development, currently learning how to create Flask webapps. I am using Atom along with some addons like PreviewHTML to help me visualize live previews of my HTML code. However, I am facing an issue where I cannot see a ...

pythonhtmlflaskjinja2atom-editor

incorporating HTML attributes without specified values in .NET

Is there a way to include the multiple attribute in a select element using .net? I attempted the following approach: If MultiSelect Then drpSelect.Attributes.Add("multiple", "true") End If However, technically speaking, the HTML should only require the ...

html.net

Transmit HTML form information through a POST request to an ASP.NET web service

Having an HTML page with a contact form is great, but I'm facing the challenge of sending the data using AJAX. I attempted to send the data to a webservice without converting the structure to JSON format, but unfortunately, I did not succeed. Is ther ...

htmlasp.netajaxweb-servicespost

What is the process to retrieve a variable from a Node.js file in an HTML document?

What is the best way to showcase a variable from a node.js route in an HTML File? I have a node.js route structure as follows: router.post("/login", async (req,res) => { try { const formData = req.body const name = formData.name ...

javascripthtmlnode.js