What is the best way to add a space line after a word in a sentence using HTML and CSS?

Question

What is the best way to add a space line after a word in a sentence using HTML and CSS?

This question pertains to HTML/CSS.

I am looking to replicate the image provided, where I need to insert a line to fill the empty space after certain words.

The length of the words may vary.

For instance, if the total width is 1000px and the word is 100px long, the half-line should be 900px in length.

If the word is 350px, then the half-line should be 650px long.

Is there a CSS solution for achieving this effect?

Please provide guidance on how to accomplish this task.

html css

Answer 1

Answer №1

Here's a helpful solution :)

h2 {
    overflow: hidden;
}

h2:after {
    content:"";
    display: inline-block;
    height: 0.5em;
    vertical-align: bottom;
    width: 100%;
    margin-right: -100%;
    margin-left: 10px;
    border-top: 1px solid black;
}

<h2>Featured products</h2>

Answer 2

Here's a helpful solution :)

h2 {
    overflow: hidden;
}

h2:after {
    content:"";
    display: inline-block;
    height: 0.5em;
    vertical-align: bottom;
    width: 100%;
    margin-right: -100%;
    margin-left: 10px;
    border-top: 1px solid black;
}

<h2>Featured products</h2>

Answer 3

Answer №2

If you are looking to create a grid layout, the following CSS code can help you achieve that:

.parent {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
}

 .line{
    background:black;
    height:1px
}

<div class="parent">
  <div>My some text</div>
  <div  class="line"></div>
</div>

Answer 4

If you are looking to create a grid layout, the following CSS code can help you achieve that:

.parent {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
}

 .line{
    background:black;
    height:1px
}

<div class="parent">
  <div>My some text</div>
  <div  class="line"></div>
</div>

What is the best way to add a space line after a word in a sentence using HTML and CSS?

Answer №1

Answer №2

Similar questions

Tips for positioning Bootstrap thumbnail elements

Saving information to a hidden div using jStorage

I have noticed that the Javascript code is being loaded prior to the completion of my HTML/CSS page for some unknown

How can I use CSS to transform a "+" symbol to an "x"?

The issue with the sticky table header functionality is that it is not functioning properly within the Angular Materials mat

substitute tags

The embedment of wmv videos does not include the option for a fullscreen button

Using JavaScript and Regular Expressions for Performing Multiple Replacements

Mobile Iframe in Full View

When using $http get, it returns a "not found" error, but the direct request

Creating sleek mobile apps with AngularJS

Trouble with displaying theme modifications in Liferay

Low-quality CSS Gradient Design

Is there a way for me to dynamically retrieve the input value produced by the Query?

Generating Dynamic Widgets Within the Document Object Model

Assistance required in filling out a table solely through JavaScript with input from an HTML form

What is the process for setting up a "Highlight tab" feature in Next.Js?

What is the best way to include an arrow in a dropdown menu?

Tips for optimizing Angular source code to render HTML for better SEO performance

Adjusting the visibility of a div as you scroll