Separate the text with an underline to keep them from joining

Trying to incorporate the design shown in the image:

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

The challenge lies in maintaining a consistent distance between the text and the accompanying line as the screen size changes. While it currently works fine, the line tends to overlap with the 'Test Border' section when the screen size is reduced.

Please refer to the code snippet below for my current implementation. Any suggestions on a better approach would be greatly appreciated.

Also, here is a jsfiddle link for your convenience.

h3 {
  font-size: 26px;
  color: #000 !important;
  max-width: 90px;
  display: inline-block;
  padding-bottom: 15px;
  width: 8%;
}

.underline {
  display: inline-block;
  border-bottom: 1px solid #c6bcb6;
  width: 90%;
}
<h3>Test Border</h3>
<div class="underline"></div>

htmlcss

Answer №1

To create a table-like display for both blocks, you can set the first block to have a fixed width since it contains static text.

.container {
  display: table;
  width: 100%;
  vertical-align: bottom;
  padding-bottom: 15px;
  table-layout: fixed;
}

h3 {
  font-size: 26px;
  color: #000 !important;
  max-width: 90px;
  display: table-cell;
  width: 85px;
}

.underline {
  display: table-cell;
  border-bottom: 1px solid #c6bcb6;
  width: 100%;
  position: relative;
  top: -12px;
}
<div class="container">
  <h3>Test Border</h3>
  <div class="underline"></div>
</div>

Answer №2

I'd opt for using flex box in this manner.

.border {
  display: flex;
}
.border .string {
  font-weight: bold;
  font-size: 26px;
  flex: 0 1;
}
.border .line {
  border-bottom: 1px solid #c6bcb6;
  flex: 1;
  margin: 0 5px 0 10px;
  transform: translate(0, -6px);
}
<div class="border">
  <span class="string">Test String</span>
  <div class="line"></div>
</div>

This approach will ensure that the title spans the width of the longest unbroken word, with the border filling up the remaining space.

Here's an example illustrating how it looks with paragraphs inserted between each header (a near real-world scenario)

.border {
  display: flex;
}
.border .string {
  font-weight: bold;
  font-size: 26px;
  flex: 0 1;
}
.border .line {
  border-bottom: 1px solid #c6bcb6;
  flex: 1;
  margin: 0 5px 0 5px;
  transform: translate(0, -6px);
}
<div class="border">
  <span class="string">Lorem ipsum dolor</span>
  <div class="line"></div>
</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis metus at semper laoreet. Vestibulum vitae lectus ut justo consequat dignissim et in eros. Duis aliquam, ipsum et imperdiet venenatis, ipsum augue scelerisque ante, eu lacinia dui metus
  sed lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam eu risus a nibh vulputate consectetur. Phasellus id lectus tempor, cursus arcu ut, suscipit augue. Etiam aliquam lobortis semper. Vestibulum dui arcu, faucibus vel suscipit
  sed, fermentum sed purus. Vivamus pharetra orci aliquam ligula imperdiet elementum a non tortor. Donec nisl enim, condimentum id nulla quis, vulputate interdum felis. Pellentesque molestie congue urna, eget ultricies est aliquet in. Aenean convallis
  magna dolor, vitae facilisis nibh euismod et.
</p>
<div class="border">
  <span class="string">Etiam quis molestie</span>
  <div class="line"></div>
</div>
<p>
  Etiam quis molestie libero. In vitae massa cursus, commodo lectus vel, vehicula felis. Nam venenatis tortor et diam faucibus, vel ullamcorper orci placerat. Mauris at aliquet nunc, quis eleifend turpis. Mauris ultricies at mi ac bibendum. Lorem ipsum
  dolor sit amet, consectetur adipiscing elit. Nulla metus enim, volutpat ut magna sed, dignissim tincidunt lorem. Nam nec tempor urna. Nam eget quam elit. Pellentesque condimentum turpis consequat turpis rhoncus vestibulum. Curabitur efficitur dapibus
  tortor ac bibendum. Donec risus nibh, dignissim vel sapien vel, fermentum scelerisque velit. Ut posuere finibus erat, nec bibendum nunc faucibus at.
</p>
<div class="border">
  <span class="string">Phasellus sed orci</span>
  <div class="line"></div>
</div>
<p>
  Phasellus sed orci eget urna commodo luctus a sed felis. Aliquam erat volutpat. Quisque sit amet volutpat magna. Etiam vestibulum, velit sit amet efficitur consectetur, tortor velit consectetur velit, et facilisis ex dolor sit amet quam. Fusce tristique
  lorem eget dapibus malesuada. Suspendisse iaculis est nec urna sollicitudin, tincidunt vehicula justo pellentesque. Morbi nulla lorem, tempus a interdum vel, fringilla ut elit. Vestibulum sed neque sed lorem viverra luctus. Suspendisse sapien ipsum,
  ultrices vitae posuere eget, tristique sit amet augue. Nam suscipit, dolor et lacinia vulputate, erat nunc lacinia nibh, vel posuere nisl nunc eget enim. Vestibulum suscipit lorem risus, id feugiat sem molestie ac. Integer consectetur nunc sed lacinia
  commodo. Quisque cursus purus nec dui euismod, nec porttitor nibh fermentum. Nunc tellus mauris, accumsan vitae tincidunt sit amet, ultricies in elit. Donec elementum libero ipsum, sit amet aliquam tortor volutpat eget. Pellentesque pretium dictum ligula.
</p>
<div class="border">
  <span class="string">Fusce ultricies ante</span>
  <div class="line"></div>
</div>
<p>
  Fusce ultricies ante ut orci laoreet, in luctus quam eleifend. Integer nisl purus, pharetra sit amet ligula id, porta porta risus. Etiam nec varius risus, eget euismod risus. Vivamus pharetra purus vitae turpis ultrices ullamcorper. Proin vestibulum,
  tortor id blandit pharetra, sapien augue dictum elit, a efficitur urna magna at lorem. Donec sollicitudin, purus sed pharetra iaculis, dolor mauris pretium est, in vestibulum massa odio vitae sapien. Curabitur scelerisque felis dui, non molestie nisl
  viverra in. Integer tempor nec risus quis vulputate. Nulla facilisi. Pellentesque ipsum elit, lacinia et consectetur id, gravida ut arcu. Maecenas vestibulum faucibus rutrum. Duis at egestas purus. Proin ac congue nisl, id placerat turpis. Aenean ac
  nisl at odio efficitur convallis sit amet quis ipsum. Mauris scelerisque aliquet libero, nec dapibus lectus.
</p>

Answer №3

To resolve this issue, I recommend making changes to the markup structure. The current code may cause the text inside the h3 tag to exceed the specified max-width limit. Consider using the following solution:

.textline {
  display: table;
}

h3 {
  font-size: 26px;
  color: #000 !important;
  display: table-cell;
  width: 9%;
  margin-right: 1%;
  vertical-align: bottom;
}

.underline {
  display: table-cell;
  border-bottom: 1px solid #c6bcb6; 
  width: 90%;                 
  position: relative;
  top: -7px;
}
<div class="textline">
  <h3>Test border</h3>
  <div class="underline"></div>
</div>

Answer №4

When working with percentages, it is important to consider the fixed measurements of other elements such as width, margins, and borders. The space left over when using 90% on a 1000px screen will be different from that on a 500px screen.

h3 {
  font-size: 26px;
  color: #000 !important;
  width: 95px;
  display: inline-block;
  padding-bottom: 15px;
}

.underline {
  display: inline-block;
  border-bottom: 1px solid #c6bcb6;
  width: calc(100% - 100px);
}
<h3>Test Border</h3>
<div class="underline"></div>

Answer №5

If you're looking to create a stylish border effect for your text, consider using a table display with each element in its own cell:

<div class="div-row">
    <div class="div-cell"><h3>Test Border</h3></div>
    <div class="div-cell underline"></div>
</div>

Customize it further with CSS:

.div-row  {
    display: table-row;
    width: 100%;
}

.div-cell {
    display: table-cell;
}

This method allows the line div to adjust its width automatically as per the browser window size or switch from desktop to mobile view.

For added control, you can also specify a fixed width for the text-containing div.

Answer №6

If you want to achieve this, you can use the calc() property...

Take a look at this fiddle for reference

Here are the steps to follow:

h3 {
    font-size: 26px;
    display: inline-block;
    max-width:90px;
    margin-right:10px;
}

.underline {
    display: inline-block;
    border-bottom: 1px solid #c6bcb6;
    width: calc(100% - 104px);
}

Answer №7

Check out the following CSS snippet:

h3 {
  font-size: 26px;
  color: #000 !important;
  display: inline-block;
  padding-bottom: 15px;
}

.underline {
  border-bottom: 1px solid #C6BCB6;
  width: 90%;
}

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

Using jQuery or JavaScript to hide a div if the image inside it is unable to load

There is a div called 'userFeatureProductImage' that is duplicated. Sometimes a broken image may appear, so I would like to hide the div as a precautionary measure. How can I achieve this? ...

javascriptjqueryhtml

Dynamic background featuring a tall vertical image

I have an image that is extremely long, measuring 2263 x 8192 pixels. I want to design a website with a background that spans the width of the window and the full height of the image, all while maintaining responsiveness. The concept is to have this elong ...

jqueryhtmlcssimage

Automatically change a text based on its location

Currently leveraging the amazing flexible-nav to showcase the current subtopic within my post. I am also considering the possibility of extracting this current-string and showcasing it at the top of the page in my main navigation bar. This way, the text w ...

javascripthtmlcss

Is there a way to prevent the ENTER key on the keyboard from interacting with

When visiting http://api.jqueryui.com/datepicker/, I came across the following information: Keyboard interaction While using the datepicker, various key commands are available: PAGE UP: Move to the previous month. PAGE DOWN: Move to the next month. CTRL ...

javascriptjqueryhtmljquery-uidatapicker

Tips for arranging Bootstrap cards in ReactJS so they wrap to a new line after three have been displayed

In my personal portfolio, there is a dedicated page for showcasing various projects using Bootstrap cards. These projects are fetched from a CardData.js file and then mapped to a ProjectCard component. Ideally, I want to display 3 cards per row with consis ...

javascripthtmlcssreactjsbootstrap-4

UTF-8 encoding experiencing issues on select Android mobile devices

Our new website, powered by Wordpress, is up and running but some users are experiencing issues with displaying Swedish special characters. It seems to be happening specifically on Android devices, regardless of the browser being used. However, I have not ...

cssencodingandroid

How can I modify the color of a div when a validation error occurs?

I have recently completed a contact form with validation using the constraint validation api. Although the files are functioning as intended, I am curious if there is a method to make the error boxes turn red when an error occurs and white (or hidden) when ...

javascripthtmlcss

Load images dynamically onto canvases overlayed on top of each other and adjust their size accordingly

I have a unique situation where I have two canvases stacked on top of each other. My goal is to dynamically load images into these canvases and adjust their size to fit the image dimensions. The issue I am facing is that once the images are loaded and the ...

javascripthtmlcsshtml5-canvas

What is the process for choosing corresponding values in jQuery?

Hello, I am a beginner in programming and I am currently working on developing a word guessing game. Here is the code I have written so far: The (letter) represents the key being typed by the player Var compareLetters = $('.letter') represents ...

javascriptjqueryhtmlcss

Troubleshooting issue with removing an item from jQuery's html5 localStorage

Exploring the following code snippet: $('#doneItem').click(function(){ $(this).each(function(index){ var item = 'personal' + index; alert(item); localStorage.removeItem('personal' + ...

jqueryhtmllocal-storage

Guide on adding an image to a Bootstrap card component

I'm facing a simple issue that I can't seem to solve. As a beginner in using bootstrap, I'm struggling to figure out how to insert an image into the card header. I've been searching online for solutions for the past 30 minutes with no l ...

htmlcssimagebootstrap-4

Is it possible to create a hyperlink on the second page that directs to the first page and triggers a specific JavaScript function on the first page?

Working with a former colleague's code in C#, asp.net MVC, Telerik/Kendo controls. I am trying to navigate to a specific section on a page from another page that uses tabs/sections with links at the top of the page to toggle visibility based on the se ...

javascriptjqueryhtmlasp.nethyperlink

Creating a personalized mouse cursor using HTML

I am trying to set an image as my cursor inside a div container but I want it to disappear and revert back to a normal pointer cursor when the mouse hovers over any link within that div. Here is my code snippet: var $box = $(".box"); var $myCursor = $ ...

javascriptjqueryhtmlcursor-position

Steps for changing the background color string in mui?

I have a component where I am trying to dynamically change the color based on the user type. The issue arises when I use gradient colors, as the transition stops working. If I stick to simple colors like blue, red, or green, it works fine. Currently, the c ...

cssreactjsmaterial-ui

Determine in Jquery if all the elements in array 2 are being utilized by array 1

Can anyone help me figure out why my array1 has a different length than array2? I've been searching for hours trying to find the mistake in my code. If it's not related to that, could someone kindly point out where I went wrong? function contr ...

javascriptjqueryhtmlcssjive

"Vertical Line Encoding: A Strategy for Improved Data

Can someone help me with a coding issue I'm facing on my website? I am trying to create three vertical lines to separate images in columns, but every time I exit the editor and preview the site, the position of the lines changes. I'm new to HTML ...

htmlcss

Reorganizing content under an image as the browser is resized by implementing a media query

In the footer section of my document, I have text positioned next to an image (floated to the right). However, when I resize my browser to a minimum width of 768px, both the text and image lose alignment. My goal is to centralize both elements with the ima ...

htmlcssmedia-queries

Why does my design become chaotic when switching from four columns to two columns in responsive mode?

My layout is currently set up like this: But when I try to resize it into two columns, I encounter a new issue: I don't want to add height to the columns. How can I resolve this problem? Thank you. ...

htmlcss

Changing the loading spinner icon in WooCommerce

Could someone help me change the loading spinner icon in WooCommerce? The current icon is defined in the woocommerce.css: .woocommerce .blockUI.blockOverlay::before { height: 1em; width: 1em; display: block; position: absolute; top: 50 ...

phpcsswordpresswoocommercespinner

What is the procedure for adding information to an xml document?

I'm in the process of designing a basic HTML form that can input data into an XML file. My goal is to save these files on a cloud server such as Google Drive. To enhance the functionality, I plan to utilize jQuery and possibly AJAX if required. Ideall ...

jqueryhtmlajaxxmlxslt