Is it possible to utilize the leftover horizontal space of a div once a headline with inline or inline-block elements has been included?

I am in search of a solution for creating consistent spacing between headlines of varying lengths and the end of the row. My goal is to fill this space with something like a dotted border, but I have encountered compatibility issues with different browsers. The most successful method so far has been using display:block ruby on Firefox, along with adding a 100% width span after the headline. It is important to note that I do not want the headlines to have a set width.

I have included an image showcasing the desired outcome, which should be achieved regardless of the length of the headline.

Image example

I have experimented with flex, inline, inline-block, separating content into separate divs, keeping content in the same div, and various other approaches in an attempt to find a suitable solution.

htmlcss

Answer №1

Unfortunately, there is no image attached to the previous message, but I believe I understand your objective. To achieve this, my approach would involve styling the headings using a flex display property. Additionally, I would suggest inserting an empty pseudo-element that dynamically expands and features a background image with dot patterns or any desired effect.

h1 {
  display: flex;
  gap: 0.5em;
}
h1::after {
  content: '';
  flex-grow: 1;
  background-image: url(https://example.com/image.svg);
  background-repeat: repeat-x;
  background-size: auto 20px;
  background-position: left center;
}
<h1>One</h1>
<h1>Two is longer</h1>
<h1>Three is very long indeed</h1>

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

Box size adjusts to fit its content, including any form fields

Looking to create a box that adjusts its size based on content and center it without resorting to using tables for layout or setting fixed sizes. How can this be achieved while keeping the markup clean? I've almost got it, but the form fields are not ...

csscss-grid

What is the best way to distinguish between my HTML form submission and my JavaScript form modification process?

I am facing a dilemma with the layout of my form and table on the webpage. The structure is as follows: +-------------------------------------------------+ | FORM | | +------------------------------------------- ...

javascriptphphtmlforms

Trigger a database update upon clicking the submit button

Greetings! I am a newcomer to the world of PHP and have scoured Stack Overflow for solutions to no avail. My query revolves around updating a database when a submit button is clicked. Below, you will find the code associated with this submit button. <? ...

phphtml

Is there a way to create a password-like input in HTML that can also trigger keydown events?

Is there a way to record keyboard events on masked password input elements without compromising security? I want to assure everyone that my intentions are not malicious. I am simply looking for a way to analyze user behavior after informing them and ensur ...

javascripthtmlpasswordskeyboard-eventsmaskedtextbox

Detecting Browser Version Using XML and Javascript

Recently, I created an XML file and attempted to access it using my web browser. It worked perfectly fine in Internet Explorer, but when I tried opening it in other browsers, it failed to function properly. After some investigation, I discovered that the i ...

javascripthtmlxmlcross-browser

Extracting text from HTML tags using Python

Take a look at my code below. It iterates through a list of projects and generates an output in the form of a table. x = PrettyTable(["Task", "Summary", "Assignee", "Status", "Deadline"]) display = Display() display.start() driver = webdriver.Chrome() dr ...

pythonhtmlseleniumbeautifulsoupselenium-chromedriver

Utilizing jQuery for Dynamically Loading Child Elements

As users select choices from a side menu, a set of items is dynamically added. The more choices they make, the more items are displayed. Some items have a 'stats' div while others do not. I want to check if an item has a 'stats' div, a ...

jqueryhtmlcss

JavaScript code that makes a website refresh when a button is clicked

Upon clicking a particular button, the page refreshes. I would prefer to avoid this automatic refresh. What steps can I take to prevent it? ...

javascripthtmlcss

Issue with loading JS while trying to create and edit an element

I am seeking assistance with two issues I am facing in the execution of my JavaScript code. The first problem arises when working with the 'change' and 'select' events to detect selections and changes within a dropdown menu. Specificall ...

javascriptphphtmljquery

What is the best way to conceal an element on a mobile device using Bootstrap 4?

As I work on developing a website based on bootstrap 4, my focus is on optimizing it for mobile devices. In order to achieve this, I am looking for ways to hide certain elements on specific screen sizes. Can anyone guide me on how to achieve this? I have ...

htmlcssresponsive-designbootstrap-4

HTML formatting: unable to correctly style text with proper separation

When it comes to text display, I often find myself needing to showcase multiple items. The challenge arises when each item requires displaying a sprite, which is just a portion of a larger image. Here's an example of the code used to display the spri ...

html

Beginner in Bootstrap CSS - basic code for a 5x5 grid containing nested grids in every "cell"

I am currently in the process of developing a seating chart application that I envision to look similar to this design: https://i.sstatic.net/vZ5Au.png While exploring different options, I have some concerns about whether it can be fully accomplished usin ...

htmlcssgridbootstrap-4

Show and hide a div with the click of a button

As I embark on rebuilding a website from the ground up, I find myself pondering how to achieve a specific functionality: My goal is for another view to appear when one of two buttons is clicked. How can this be accomplished? I attempted the following app ...

jqueryhtmlcss

Error: The property 'classList' cannot be read as it is null in Flask, jinja2, JavaScript, HTML, and Bootstrap

I am currently utilizing a bootstrap button class, and upon clicking the button, I pass this.id to the caretToggle() JavaScript function. Since I have multiple bootstrap buttons that I want to toggle the caret on, I attempted the method below, only to enco ...

javascripthtmlflaskbootstrap-4jinja2

What is the best way to ensure my arrow text remains properly positioned when using fullpage.js?

Seeking guidance from the web development community. I am currently working on a client's website that utilizes fullpage.js and encountering a persistent issue. On slide1 of the website, I am struggling to display the correct text next to the arrows. ...

javascriptjqueryhtmlcssfullpage.js

Use CSS Grid to anchor the final element to the right side of a horizontal navigation menu

I am facing an issue with my horizontal navigation bar that contains a dynamic number of links. In this specific case, there are 3 links displayed below: https://i.sstatic.net/f5vcn.png My goal is to keep the first two links in their original position an ...

htmlcssflexboxcss-grid

Discovering the solution to creating a responsive element grid using only CSS: (8-1) - (4-2) - (2-4) - (1-8)

My responsive website includes the following HTML code: <div id="fpma"> <span class="fpm"></span> <span class="fpm"></span> <span class="fpm"></span> ...

htmlcss

What is the best way to position a button directly to the right of a text box with no space in

Is there a way to perfectly align a submit button to the right of a text or search box, matching the height of the search box, and eliminating any unwanted white space between them? This is my current setup: <input type="text" value="" placehold ...

htmlcsslayout

How can I horizontally add divs until the width size is exceeded?

I am looking to make tiles flow horizontally until there is no more space, then wrap to the next line. Additionally, I want them to be responsive to different screen sizes. Here is my initial code snippet: .tile { width: 248px; height: 126px; ba ...

htmlcss

Graphic created using CSS content generation code

While browsing a website, I came across some intriguing elements and decided to investigate further. Here is what the element looked like: Upon examining the CSS definition: .entry-meta .date a:before { content: "\f303"; } I am aware that image ...

htmlcss