Substituted the BR tag with a comma while including a space after the text

Upon further examination, I have observed that an extra space is being added when replacing the BR tag with a comma in the text:

HTML:

<div>
one first
<br class="hey">
two second
<br class="hey">
three third
</div>

CSS:

.hey {
  content: '';
}
.hey:before {
  content: ', ';
}

Current Result: one first , two second , three third

Desired Result: one first, two second, three third

JSFiddle: https://jsfiddle.net/tk4f7n9b/

PS: I am limited to using CSS only. I am unable to inject or modify any HTML code, but can include an external JS file if needed.

Answer №1

The reason for the space is due to having new lines between elements. To fix this, you can utilize a negative left margin:

.hey {
  content: '';
}
.hey:before {
  content: ',';
  margin-left: -0.2em;
}
<div>
one first
<br class="hey">
two second
<br class="hey">
three third
</div>

Answer №2

@vanovm's response offers a clever CSS-only method. Employing an external JavaScript file: amend the placement of <br> elements to align them with text nodes on the same line.

let el = document.querySelector('div')

el.innerHTML = `<div>
one first<br class="hey">
two second<br class="hey">
three third
</div>`
.hey {
  content: '';
}
.hey:before {
  content: ', ';
}
<div>
one first
<br class="hey">
two second
<br class="hey">
three third
</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

What is the best way to upload multiple files in Laravel using Guzzle?

Currently, I am facing an issue while trying to upload files to an external server using JWT for authentication. Here is a snippet of my form: <form action="{{ route('operations.photos-for-families.upload', [$operation, $current->index ...

Enhancing Icons with Badges in Bootstrap

Does anyone know how to properly position a badge on top of an icon without it appearing to the right? Check out this screenshot: https://i.sstatic.net/z1Apj.png This is the code I am using: <li class="nav-item mr-3"> <a href=&quo ...

Utilizing the each() method to cycle through multiple unordered lists and concealing any nested list items exceeding a count of 8

Struggling to figure out how to loop through all ul elements with a class of ul.children and hide any child elements under ul.child that exceed 8. See the snippet of code below for reference: $(function() { $('ul.children').each(function() { ...

Working condition may vary depending on the size of the item

I have integrated the Masonry jQuery plugin into my design, but it is not functioning properly. The CSS class mentioned in the documentation only includes: width: 25% For my purposes, I modified it to: width: 24% float: left margin-right: 5px This modi ...

Guide to adding an icon within an HTML `<input>` element

Is anyone able to help me successfully place my icon font inside the search input field? I've tried adjusting the margin and padding, but nothing seems to be working! If you have any insights or suggestions, please let me know. Your help is greatly a ...

Managing selected ticket IDs in a table with AngularJS

I have a table that includes options for navigating to the next and previous pages using corresponding buttons. When I trigger actions for moving to the previous or next page (via controller methods), I store the IDs of checked tickets in an array $scope. ...

Can you explain how to incorporate a node module script into a React.js project?

I have encountered an issue where the element works perfectly fine when using an external node module, but fails to function properly when using a locally downloaded node module. Unfortunately, I am unable to identify the root cause of this problem. You c ...

How to modify an array in an HTML document using BeautifulSoup

Running a Python script, I am trying to access a local HTML file containing a JavaScript array inside a script tag that needs updating. Here is the test code snippet: from bs4 import BeautifulSoup html = ''' <script> var myArray ...

What could be causing this issue where the input button displays perfectly centered in Chrome, but not in IE and Firefox?

Have you noticed that this input button appears perfectly centered in Chrome, but in IE or Firefox it seems to be off to the right? You can see it as the second button on the right side of this page: Site : HTML : <div style="float:center;text-align: ...

Drop-down Navigation in HTML and CSS is a popular way to create

My navigation menu is functioning well and has an appealing design. The HTML structure for the menu is as follows: <div id="menubar"> <div id="welcome"> <h1><a href="#">Cedars Hair <span>Academy</span></ ...

Issue with mouseout gap in Microsoft Edge when using the <select> element

A noticeable gap appears in Microsoft Edge between the <select> menu and its options when expanding the menu, as shown here: https://i.stack.imgur.com/SprJ2.png This particular issue can cause problems with the mouseout event due to inconsistent be ...

I'm struggling with my project called "Number TSP" and I can't seem to figure out why it's not working properly

Upon reaching the end of my code, I am encountering an issue where instead of seeing the expected output of "Done!", it displays undefined. This is the code in question: const container = document.querySelector(".container") const table = document.querySe ...

The z-index remains in limbo until the transition is complete

Exploring the concept of "folding" elements through the use of rotate3d(), I encountered an issue with only one side of my fold. During the animation, the z-index seems to be ignored, but suddenly jumps to the top at the end. My suspicion lies in the z-axi ...

Limit sound reproduction to a designated interval

Imagine having an audio file that lasts for 90 seconds. The goal is to allow users to play this audio file, but only within the range of 10s-40s. Here's what I want to do: Audio will begin at 10s Once it reaches 40s, it will reset back to the 10s ...

Can the text inside a div be styled to resemble h1 without using an actual h1 tag?

Is it feasible to apply the h1 style to all text within a div without utilizing tags? For instance: <div id="title-div" style="h1">My Title</div> Or a potential solution could be: #title-div { style: h1; //Imports all s ...

The settings of the button return to their default state once it is clicked on

I've been working on a small project and I added a button with hover and CSS effects. However, the issue is that once the button is clicked, it reverts back to its basic state without any of the CSS properties applied. I attempted to troubleshoot if ...

What is causing the Maximum call stack size exceeded error to occur without using .val()?

Can anyone help me figure out why I am getting the error message "Uncaught RangeError: Maximum call stack size exceeded" when trying to implement a follow feature using the follow button? Adding .val() to Meteor.users.update(Meteor.userId(), {$addToSet: {& ...

The output is not shown because the form data is not being generated properly by document.getElement

<html> <head> </head> <body style = "text-align:center;" id = "body"> <form id = "number" method="get" name="number"> <input type="text" id="number1" name="number1" value="" /> <input type="text" id="number2" name="nu ...

Buefy: Secure the header of the table in place while allowing the rows to scroll freely

How can I make the header of the table component stay fixed while allowing only the rows to scroll? ...

I'm having trouble with Material Design Slide Toggle as it lacks event.StopPropagation functionality. Any suggestions on what alternative I

When working with the Slide Toggle in Material Design, I noticed that it does not have a stopPropagation event. This is because the "MdSlideToggle.prototype._onChangeEvent" already includes a call to stopPropagation. So, what should be used instead? <m ...