What is the best way to split <hr> tags into different sections?

I'm striving to create a design similar to this -

https://i.sstatic.net/hcaST.png

Initially, I attempted to use a hr tag and modify it for my purposes. However, my efforts have not yielded the desired outcome. Any assistance in understanding this concept or suggesting alternative methods would be greatly appreciated!

Thank you!!

Answer №1

One option is to add a css border to the top or bottom of the hr element and use the dash style.

hr {
border-top: 4px dashed red;
<!DOCTYPE html>
<html>
<body>

<h1>Lorem ipsum</h1>
<hr>

</body>
</html>

Alternatively, you can create multiple hr elements as inline blocks with different widths.

.inlineHr  {
display: inline-block;
border-top: 4px solid black;
}

.hr1 {
width:120px;
}

.hr2 {
width: 60px;
margin-left: 10px;
}

.hr3 {
width: 20px;
margin-left: 10px;
}
<!DOCTYPE html>
<html>
<body>

<h1>Lorem ipsum</h1>
<hr class='inlineHr hr1' />
<hr class='inlineHr hr2' />
<hr class='inlineHr hr3' />

<p>Here is the following text</p>

</body>
</html>

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 it possible to customize the placement of the login or register success message?

I would like to display a message indicating whether the login/register process was successful or not above my form. I am using Boostrap 3 along with some PHP functions. The message appears above my navbar but vanishes after 3 seconds, which is a bit anno ...

My JavaScript code runs perfectly fine on JSFiddle, but for some reason, it's not functioning correctly on

I need a solution where a new button is generated every time the post button is clicked, and each of these buttons should have its own counter. This works successfully in JSFiddle, but unfortunately doesn't work when I try to implement it elsewhere. ...

What is the best way to extract user input from a bootstrap search bar and integrate it into an ajax request to fetch information?

I am currently utilizing HTML, Javascript, and bootstrap to develop a web application. However, I have encountered an obstacle. When using the code document.getElementById("input here"), it only returned an array of 0. My goal is to retrieve data from an A ...

Manipulating background scrolling using jQuery

I had a vision of creating a logo with PNG transparency and a scrolling background that would give the appearance of being made in Flash. To achieve this effect, I utilized the jquery.backgroundPosition.js plugin for enabling background scrolling. Here is ...

Removing a session when the client has left

I wanted to simplify what I'm trying to achieve. Imagine two people have PHP sessions on a webpage. One person leaves the page while the other remains. After 60 seconds, the session of the person who left should be terminated automatically (like a ti ...

Is it possible to customize the background color of select2 boxes separately for each option?

I recently implemented the select2 plugin and now I'm looking to add a new class within the .select2-results .select2-highlighted class in order to change the background color. Does anyone have any suggestions on how to achieve this? ...

Preserve the visibility of a text input form while the checkbox is selected

Within my HTML code, there is a form that includes a checkbox labeled "other." When this checkbox is selected, a textbox will appear. If the user types in text and submits the form, the textbox disappears, but the checkbox remains checked (as saved in loca ...

What is the precise width?

Here's a question for you: an HTML element has the following styles applied to it - width: 150px, padding: 3px, border: 4px, margin: 7px. What is the actual width of the element? I'm confused by this question because it specifies that the width ...

Why isn't the document.getElementById().value() function functioning properly within my PHP code?

When working on my PHP code, I included the following: <select class="ht__select" onchange="sorting('<?php echo $id ?>')" id="sorting"> <option value="">Default sorting</option> <option value="low_price">Sor ...

What is the best way to position a title and subheading alongside an image?

I am currently working on developing a blog using php and html to enhance my coding skills. On my website, I have a special category where I display posts, the number of which can vary. Each post is composed of a title, a subheading, and a placeholder div ...

Switching between different CSS files based on the URL using jQuery or another method

Is it feasible to apply specific styles based on the ID or load various CSS files depending on the URL you are visiting? For example: <script> if(location.href == 'http://jpftest2.tumblr.com/about'){ document.write('<style type= ...

What is the best way to achieve full screen in HTML5 using Libgdx?

Can someone provide guidance on how to maximize the canvas in HTML5 LibGDX? I seem to only come across the width and height properties in GwtApplicationConfiguration. ...

Steps to remove a scrollbar from a fullscreen slider

Can anyone provide code examples on how to disable the scroll bar on a full screen slider? I want to have a scroll down button on each slider that, when clicked, will show the scrollbar only below the slider. I don't want the scrollbar to be visible ...

Once the AJAX callback is complete, the onblur event will revert back to the original field or the updated field

I am currently working with an AJAX callback: Here is the HTML snippet: <a onCLick="loadXMLDoc(id1,id2)">(Add)</a> This function triggers an AJAX method that replaces the "(Add)" text with a basic HTML input field. Subsequently, when there ...

Guide to automatically converting Google fonts to base64 for inline use

I am currently in the process of creating my own personal blog using next.js. While everything is going smoothly with the use of Google Fonts for font styling, I have encountered an issue with initial content shift upon loading. This occurs when a new fon ...

What is the best way to contain several elements in a flexbox with a border that doesn't span the entire width of the page?

Just dipping my toes in the waters of web development and I've come across a challenge. I'm attempting to create a flexbox container for multiple elements with a border that doesn't stretch across the entire width of the page, but instead en ...

I attempted to separate a string containing <br> tags using the explode function, but the method was not successful

In my code, there is a string that looks like this <br> ACCEPT:YES <br> SMMD:tv240245ce <br> This string is stored in a variable called $_session['result'] My task is to extract the following information either as an array or ...

The MDB Bootstrap collapse fails to display on the initial click

Every time I click on the button, there seems to be a delay in showing the collapse feature. It's strange because on subsequent clicks it works fine ...

How can I effectively retrieve the JWT in a node environment?

I've successfully set up JWT authentication using Node.js. After the user signs in, Node.js generates a JWT and sends it back to be stored in the localStorage. However, I've encountered an issue when trying to access this token within the express ...

Using JavaScript to display content on the screen

As a newcomer to Javascript, I'm looking for a way to display my variable on the webpage without utilizing <span> or innerHTML. var pProductCode = $('[name=pProductCode]').val(); $('input[id*="_IP/PA_N_"]').each(function(i){ ...