What is the method for incorporating this effect into the final sentence of a text?

Question

What is the method for incorporating this effect into the final sentence of a text?

I am trying to create a unique design effect by applying a custom border to only the last line of text. You can see an example here.

In this scenario, the target text is "2000 years old." (with that specific length) and not the entire width of the parent div which is set at 800px:

span
{
    color: #000000;
    display:inline-block;
    line-height:20px;
    position: relative;
    border-bottom: 10px solid red;
    padding-bottom: 0px;
    text-decoration: none;
    font-size:52px;
}

To implement this effect, I have inserted a span, however, in a real text scenario there might not be any clear delimiter. How would you achieve this using CSS?

html css

Answer 1

Answer №1

To achieve this effect, you can utilize the ::after pseudo-element in combination with the CSS property position:relative/absolute:

body {
  line-height: 40px;
}
div {
  width: 800px;
  font-size: 52px;
  color: #000000;
  position: relative
}

div::after {
  display: inline-block;
  line-height: 20px;
  position: absolute;
  bottom: -20px;
  border-bottom: 10px solid red;
  width: 315px;
  left: 0;
  content: "";
}

<div>
  Contrary to popular belief Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
</div>

Answer 2

To achieve this effect, you can utilize the ::after pseudo-element in combination with the CSS property position:relative/absolute:

body {
  line-height: 40px;
}
div {
  width: 800px;
  font-size: 52px;
  color: #000000;
  position: relative
}

div::after {
  display: inline-block;
  line-height: 20px;
  position: absolute;
  bottom: -20px;
  border-bottom: 10px solid red;
  width: 315px;
  left: 0;
  content: "";
}

<div>
  Contrary to popular belief Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
</div>

Answer 3

Answer №2

Unfortunately, there is no direct CSS selector for styling the last line of text.

However, with a little bit of creativity, we can still achieve this effect using a clever workaround.

One way to accomplish this would be to add a bottom border to the text element and then overlay it with a pseudo-element to create the appearance of underlining the last line of text.

There are some restrictions to keep in mind:

The element must have overflow:hidden set,
You will need to manually define the background color of the pseudo-element.

This method will effectively underline the last line of text, regardless of its length, without the need to specify an exact width for the pseudo-element.

Check out the JSfiddle demo for a visual example.

body {
  font-size: 16px;
  line-height: 1.2;
}
div {
  width: 80%;
  margin: auto;
}
p {
  border-bottom: 1px solid red;
  position: relative;
}
p::after {
  content: ' ';
  position: absolute;
  width: 2000px; /* any really large number */
  height: 1px; /* same height as border */
  background: white; /* to cover the border */
  top: 100%;
}

<div>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>

Answer 4

Unfortunately, there is no direct CSS selector for styling the last line of text.

However, with a little bit of creativity, we can still achieve this effect using a clever workaround.

One way to accomplish this would be to add a bottom border to the text element and then overlay it with a pseudo-element to create the appearance of underlining the last line of text.

There are some restrictions to keep in mind:

The element must have overflow:hidden set,
You will need to manually define the background color of the pseudo-element.

This method will effectively underline the last line of text, regardless of its length, without the need to specify an exact width for the pseudo-element.

Check out the JSfiddle demo for a visual example.

body {
  font-size: 16px;
  line-height: 1.2;
}
div {
  width: 80%;
  margin: auto;
}
p {
  border-bottom: 1px solid red;
  position: relative;
}
p::after {
  content: ' ';
  position: absolute;
  width: 2000px; /* any really large number */
  height: 1px; /* same height as border */
  background: white; /* to cover the border */
  top: 100%;
}

<div>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>

Answer 5

Answer №3

Here is another approach using the :before and :after selectors.

The :before selector acts as a border, while the :after selector covers the remaining space on the line. This method also allows for transitions to be applied when hovering over the element.

ul{width: 180px}

li{
  overflow:hidden;
  position: relative;
  padding-bottom: 20px;
  display: block;
}

a{
  display: block;
  border-bottom: 0px;
  color: black;
  text-decoration: none;
  position: relative;
}

a:after{
  content: ' ';
  position: absolute;
  width: 2000px; /* any really large number */
  height: 1px; /* same height as border */
  background: white; /* to cover the border */
  top: 100%;
}

a:before{
  content: ' ';
  position: absolute;
  height: 1px; /* same height as border */
  background: red; /* to cover the border */
  left: 0;
  top: 100%;
  width: 100%;
  max-width: 500px;
  transition: all 0.3s ease-in-out;
}

li:hover > a:before{
    max-width: 0;
}

<ul>

  <li>
     <a href="#">Short link</a>
  </li>

  <li>
     <a href="#">This link  is longer and it goes to a new line </a>
  </li>

  <li>
     <a href="#">This link is longer as well and it also goes to a new line</a>
  </li>

</ul>

Answer 6

Here is another approach using the :before and :after selectors.

The :before selector acts as a border, while the :after selector covers the remaining space on the line. This method also allows for transitions to be applied when hovering over the element.

ul{width: 180px}

li{
  overflow:hidden;
  position: relative;
  padding-bottom: 20px;
  display: block;
}

a{
  display: block;
  border-bottom: 0px;
  color: black;
  text-decoration: none;
  position: relative;
}

a:after{
  content: ' ';
  position: absolute;
  width: 2000px; /* any really large number */
  height: 1px; /* same height as border */
  background: white; /* to cover the border */
  top: 100%;
}

a:before{
  content: ' ';
  position: absolute;
  height: 1px; /* same height as border */
  background: red; /* to cover the border */
  left: 0;
  top: 100%;
  width: 100%;
  max-width: 500px;
  transition: all 0.3s ease-in-out;
}

li:hover > a:before{
    max-width: 0;
}

<ul>

  <li>
     <a href="#">Short link</a>
  </li>

  <li>
     <a href="#">This link  is longer and it goes to a new line </a>
  </li>

  <li>
     <a href="#">This link is longer as well and it also goes to a new line</a>
  </li>

</ul>

What is the method for incorporating this effect into the final sentence of a text?

Answer №1

Answer №2

Answer №3

Similar questions

A DIV element may not have any visible height, even when it contains content

What is the best way to shift a link to the right within a "div" element?

JQuery Mobile Navigation with Bootstrap 3 Sidebar on the Go

What is the best way to ensure that a specified number of list items (li) will align properly within the width of an unordered list (ul

Center align a font-awesome icon vertically next to a paragraph of text

Turn off drag and drop functionality and activate selection in HTML

Combining Images Together in JavaScript

What is the best way to eliminate the text-decoration underline from a flex child when the parent is designated as the anchor?

Equal dimensions for all cards in the TailwindCSS gallery display

Ways to conceal a dynamically generated div upon page load?

Tips for properly formatting a fixed table header

Tips for personalizing your Magento 2 theme

When attempting to retrieve the innerHTML of a <div> element within a <Script> tag, the value returned is undefined

Require assistance with arranging font-awesome icons in a stacked formation

Why isn't Sequence.js Slider automatically playing?

Element failing to adhere to CSS grid layout

Struggling to animate the selector of a nested div in Jquery?

Ways to maneuver the vehicle by using the left or right key inputs

I am looking to remove the target attribute from an anchor tag if it does not have a value assigned

The sorting icon in jQuery Data Table's search option is not functioning