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

Concealing an element by using parentElement.getElementsByClassName to set the display property to none

The HTML <select> element is currently styled with a locked CSS, but I am looking to have it displayed with the default

What is causing my mobile version not to resize and adjust to fit the screen properly?

The html button adorned with a variety of CSS styles

What is the best way to combine a custom CSS class and a bootstrap class to style an element in next.js?

What is the reason behind the constraints of min/max width and height values preventing the element from fully filling its parent div?

What is the technical process behind conducting A/B testing at Optimizely?

What is the best way to incorporate a new attribute into a particular CSS class?

What could be the possible reason for the controls in my element getting disabled due to adding a JavaScript background

The table does not move up or down when using the mousewheel over the rows, but only when

Tips for choosing multiple values from a dropdown menu in Bootstrap CSS version 3

Tips for isolating html and js code?

Split total based on checkboxes toggled with JavaScript

The clearfix feature is ineffective when using AngularJS

CORS blocked the JavaScript Image's request

Grouping and styling table data cells within a row: best practices

Troubleshooting: Vue.js Component template not displaying items with v-for loop

How can I prevent katex from overflowing?

Align the inner container in the outer container-fluid

Tips for aligning words on a single line