Line divider immediately following the title on the same row

I am looking to insert a separator line immediately following the H1 tag, however my attempts have been unsuccessful. Can someone provide assistance with this?

<style>    
    #sepr { 
        border-top-width: 3 px;
        border-top-style: solid;
        border-top-color: #FF563A;
        max-width: 18%;
        display:inline-block;
    }
</style>

<h1>Test</h1><div id="sepr"></div>

When I place text inside <div id="sepr">, the line appears above the title.

<h1>Test</h1><div id="sepr">Test title</div>

The desired outcome can be seen here: https://i.sstatic.net/qNOCZ.png

Answer №1

One potential solution is to utilize Flexbox. Simply set the wrapper element to display:flex and adjust the line position using margin-top: XX px;.

A drawback of this approach is that you need to constantly modify the margin-top value when changing font sizes.

.sepr {
  display:flex;
  align-items: center;
}

.sepr .line {
  flex: 1;
  height: 3px;  
  background-color: #FF563A;
  margin-top:30px;
  
}

.sepr h1 {  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 50px;
  color: lightblue;
  padding: 0 1rem;
}
<div class="sepr">
  <h1>Test</h1>
  <div class="line"></div>
</div>

Answer №2

Check out this example of CSS and HTML

body{
  max-width: 1200px;
  margin: 1rem auto;
}
.separator{
  display:flex;
  align-items: center;
}

.separator .line{
  height: 4px;
  flex: 2;
  background-color: blue;
}

.separator h1{
  padding: 0 1rem;
}
<div class="separator">
  <h1>Example</h1>
  <div class="line" style="margin-top:10px"></div>
</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

"Unfortunately, the Ajax Update feature seems to only work properly on

Encountering difficulties with updating records in a PartialView using Ajax. A View is called with @Html.Action("_PartialView", "Controller", new { id = OrderId }) and a PartialView contains an Ajax Form. @model IEnumerable<WebMartin.Models.OrderExecut ...

Intrigued by the prospect of making HTML elements vanish or smoothly glide along with the content without obstructing it

I'm a beginner in coding and I want to make my website impressive. Right now, I have an HTML embedded element called "On this Page" that I would like to disappear when the user scrolls down the page. I've managed to position the element on the ...

Having trouble getting rounded-lg and rounded-md to work properly with Tailwind CSS - any ideas why?

I'm currently working with Next.js version 14.2.4 and tailwindcss version 3.4.1, and I've encountered an issue where rounded-lg and rounded-md classes are not applying any border radius. Oddly enough, other classes like rounded-xl and just rounde ...

Ways to turn off default browser tooltip using bootstrap4 tooltip

Check out the code below, which demonstrates displaying both the bootstrap tooltip and the native title-attribute tooltip: This is an example of text with a tooltip using Font Awesome icon: <i class="far fa-question-circle" data-toggle="tooltip" title= ...

How to position a Bootstrap 4 button group at the bottom of a flexbox container

I am working with HTML code that looks like this: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="border d-flex align-items-baseline m-2 p-2" style="width: 400px"> < ...

Ensuring Consistent HTML5 Page Layout Across Various Browsers Using CSS

Hey everyone, I recently created an HTML5 page and utilized the <section> tag. However, I'm encountering issues with the CSS file I'm using. It seems to work perfectly on Firefox, but the layout is all over the place when viewed on Chrome a ...

Switching Tabs When a Button is Clicked

I am currently using a guide from the link provided to learn how to create tabs: http://www.w3schools.com/howto/howto_js_tabs.asp. function openTab(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClass ...

Enhanced jQuery Embed Code validation for user input using a textarea

Currently, I am developing a website that allows users to input embed codes from popular platforms such as Twitter, YouTube, Instagram, Facebook, and so on. The embed code undergoes validation checks and is saved if it meets the criteria. However, when us ...

Populate a string with HTML elements

I need help loading a string into UIwebview. The text is plain coming from the database. I want the webview to display the text in bold. How can I add an HTML <b> tag or any other tag to format this simple text sourced from the database? ...

What is the best way to access and display the innerText of elements that have been removed using console

When I call the updateCartTotal() function, my goal is to display in the console the items that have been removed from the shopping cart. Every time I click on the remove button, I want it to show the item and the price. However, instead of displaying the ...

CSS/JS Label Positioner using Mootools, perhaps?

I have been tasked with incorporating a form into our website. It seems simple at first, but this particular form has some interesting JavaScript code in place to ensure that the label for each input field sits inside it. This is a clever feature, but unfo ...

The code in check.js causes a square of dots to emerge on the screen in Skype

Trying to add a Skype call button to my page has been successful, but there's one issue - a pesky white dot keeps appearing at the bottom of the footer. The script source I used is as follows: <script src="http://download.skype.com/share/skypebu ...

How can data tables be generated using AJAX, JSON, HTML, and JS?

HTML: <table> <tr> <th>Student Name</th> <th>Student Grades</th> </tr> <tr> <td> <select name="dropdown" id= ...

Is there a way to verify if a checkbox has been checked?

Having trouble with this code: if($('#primayins').prop('checked')) { $("#tx_nm0x0_pricingplan").val(1); } else { $("#tx_nm0x0_pricingplan").val(2); } It keeps returning false consistently ...

The hover effect is not functioning properly after loading jQuery with load();

When loading elements into a div using the load() function, I noticed that the :hover effect in CSS stops working for those elements. It's a dynamic menu setup, as shown below: <div id='main-menu'> <ul> <li class='click ...

Interacting with HTML5 canvas using object events

How can I assign an event handler to an element created on the HTML5 Canvas without having to manually track specific coordinates? ...

Enhancing Transparency of WMS Layers in OpenLayers

I need help figuring out how to add transparency to a WMS layer in openlayers. Here is the current javascript code for a non-transparent layer: var lyr_GDPSETAAirtemperatureC = new ol.layer.Tile({ source: new ol.source.TileWMS(({ ...

jQuery performs perfectly in Chrome but encounters issues in IE9/IE8 and other older versions of Internet

I've implemented this lengthy jQuery script to enable dynamic dropdown loading and updating when selections are changed. However, I'm facing issues in Internet Explorer where the script loads the dropdowns initially but doesn't trigger oncha ...

To modify the color of text in a mat-list-option item

Using the mat-selection-list component, I have set up a list of contacts displayed through mat-list-option: https://i.sstatic.net/ri4lP.png Currently, the background-color changes when I click on a specific contact-name (e.g. Graeme Swan), and it remains ...

Can I insert JavaScript code in any location within an HTML file?

Typically, Javascript code is placed in the header section of HTML code. <head> <script type="text/javascript" language="javascript" src="core.js"></script> ... </head> However, I've tested putting Javascript code in the body ...