To fill the remaining white space, add an underline after the last line of text

Question

To fill the remaining white space, add an underline after the last line of text

I'm struggling to implement a SCSS/CSS styling concept where I need to add a solid line before or after the last line of a heading. The challenge is that the width of the last line varies based on the screen size. I am open to any suggestions.

Here's what I aim to achieve when the text is aligned either left or right:

|Here is some text on screen|     |Here is some text on screen|
|very cool -----------------|  or |----------------- very cool|
|                           |     |                           |
|                           |     |                           |

EDIT: Added code for clarity:

HTML

<h1>You're the painter, we just want to see you paint.</h1>

CSS (current progress)

h1{
  font-family: "doesntMatter";
  font-style: bold;
  font-size: 2rem;
  text-align: left;
}

h1::after{
  display: inline-block;
  line-height: 0;
  position: relative;
  bottom: 2.5rem;
  border-bottom: 10px solid red;
  width: 100%;
  content: "";
}

html css reactjs sass next.js

Answer 1

Answer №1

After experimenting with some code, I finally cracked the solution to my issue. By tweaking a few styling elements, I achieved the desired effect of having the last line struck through.

.container {
  width: 100%;
  padding-inline: 2rem;
}

.text {
  font-style: bold;
  font-size: 2.5rem;
  line-height: 2.5rem;
  position: relative;
  overflow-x:hidden;
}

.text::after {
  position: absolute;
  left:0;
  bottom: 0.9rem;
  width: 100%;
  border-bottom: 0.4rem solid #000;
  content: "";
}

<section class="container>
      <h1 class="text>You're the painter, we are just the paint, brushes and canvas</h1>
    </section>

Removing left:0; from the text::after styling made the line jump over to fill the space at the end. Adding margin-left: 1rem provided some spacing between elements but I'm still puzzled by the behavior.

The mystery behind how it works remains, but applying overflow-x: hidden to the .text{} element ensures that the effect stops at the width of the header.

This interesting technique involves manipulating CSS properties to create the visual effect. By adjusting the styling of the container and text elements, the line spills off the page as intended.

I discovered that the line adapts to changes in the width of the final line of text. However, there are some peculiar scenarios to consider, such as when the text nearly fills the entire header width, resulting in a small protrusion at the end.

In conclusion, I have resolved the issue and hope this detailed explanation benefits those who struggled to find a solution through online searches.

Answer 2

After experimenting with some code, I finally cracked the solution to my issue. By tweaking a few styling elements, I achieved the desired effect of having the last line struck through.

.container {
  width: 100%;
  padding-inline: 2rem;
}

.text {
  font-style: bold;
  font-size: 2.5rem;
  line-height: 2.5rem;
  position: relative;
  overflow-x:hidden;
}

.text::after {
  position: absolute;
  left:0;
  bottom: 0.9rem;
  width: 100%;
  border-bottom: 0.4rem solid #000;
  content: "";
}

<section class="container>
      <h1 class="text>You're the painter, we are just the paint, brushes and canvas</h1>
    </section>

Removing left:0; from the text::after styling made the line jump over to fill the space at the end. Adding margin-left: 1rem provided some spacing between elements but I'm still puzzled by the behavior.

The mystery behind how it works remains, but applying overflow-x: hidden to the .text{} element ensures that the effect stops at the width of the header.

This interesting technique involves manipulating CSS properties to create the visual effect. By adjusting the styling of the container and text elements, the line spills off the page as intended.

I discovered that the line adapts to changes in the width of the final line of text. However, there are some peculiar scenarios to consider, such as when the text nearly fills the entire header width, resulting in a small protrusion at the end.

In conclusion, I have resolved the issue and hope this detailed explanation benefits those who struggled to find a solution through online searches.

Answer 3

Answer №2

Expanding on your existing code, this snippet encases the text in a span element. By doing so, it creates a white padding that covers the portion of the red line that falls beneath the actual text.

h1 {
  font-family: "doesntMatter";
  font-style: bold;
  font-size: 2rem;
  text-align: left;
  position: relative;
}

h1>span::after {
  display: inline-block;
  position: absolute;
  border-bottom: 10px solid red;
  width: 100%;
  left: 0;
  margin-top: -11px;
  content: "X";
  color: transparent;
  z-index: -1;
}

h1>span {
  background: white;
  padding-bottom: 11px;
}

<h1><span>You're the artist, we simply admire your work.</span></h1>

Please note – the slight hack involves positioning the element 1px differently from the line's height. This is necessary to prevent color residue on modern screens that utilize more than one screen pixel for a single CSS pixel during positioning.

Answer 4

Expanding on your existing code, this snippet encases the text in a span element. By doing so, it creates a white padding that covers the portion of the red line that falls beneath the actual text.

h1 {
  font-family: "doesntMatter";
  font-style: bold;
  font-size: 2rem;
  text-align: left;
  position: relative;
}

h1>span::after {
  display: inline-block;
  position: absolute;
  border-bottom: 10px solid red;
  width: 100%;
  left: 0;
  margin-top: -11px;
  content: "X";
  color: transparent;
  z-index: -1;
}

h1>span {
  background: white;
  padding-bottom: 11px;
}

<h1><span>You're the artist, we simply admire your work.</span></h1>

Please note – the slight hack involves positioning the element 1px differently from the line's height. This is necessary to prevent color residue on modern screens that utilize more than one screen pixel for a single CSS pixel during positioning.

To fill the remaining white space, add an underline after the last line of text

Answer №1

Answer №2

Similar questions

I need help figuring out how to showcase the following object in an Angular 5 HTML file

Looking for a seamless way to convert jsp code to html using sightly in AEM 6.1?

What is the best way to eliminate duplicate items in JavaScript?

Tips for retrieving values from numerous checkboxes sharing the same class using jQuery

What is the best way to create a dynamic sitemap in Next.js version 14?

Concealing a child component when hovering over its parent element with styled-components

Create a dialog box with rounded triangle corners

Display issues with React styled components preventing proper rendering on the screen

What steps can I take to ensure that my content from the ReactJS for WordPress plugin is easily discoverable by Google

how to combine a string in JavaScript using a prefix and suffix

Combining Date and Time in Javascript: A Guide

Accessing state property of a different component in ReactJS: A comprehensive guide

Automatically add shimmer with CSS styling

Unreachable prevState when utilizing the useState hook

Google Map in React fails to refresh its styles upon theme change (component re-render)

Interactive JS chart for visually representing values within a preset range in Vue.js

Is there a way to access the value of a variable within a loop inside a function and store it in a global variable?

What's the best way to ensure a div's height and width are equal when implementing responsive design?

Send properties to the styles of material-ui

Managing browser back button functionality