The :after pseudo-element in action with multi-line text

Question

The :after pseudo-element in action with multi-line text

Can the styling of the :after pseudo-element be applied to every line of multi-line text?

Here is the code I am currently using:

.container {
    width: 50px;
}

.text {
    position: relative;
}

.text:after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(red, yellow);
    z-index: -1;
}

<div class="container">
    <p class="text">This is some multi-line text...</p>
</div>

Although the example demonstrates that the after element is correctly applied, it is only visible on the last line of the text. Is there a way to extend this styling to all lines?

Thank you!

html css layout pseudo-element

Answer 1

Answer №1

Unfortunately, it is not possible to achieve the desired effect in the way you want.

I have discovered a method that can create a similar effect using a background-image that overlays the underlying image. By setting a slightly inclined transition from white to transparent and moving it from left to right, you can cover and uncover the background image beneath.

.container {
    width: 100px;
}

.text {
    position: relative;
    font-size: 30px;
    line-height: 1.2em;
    background-image: linear-gradient(to left top, transparent 49%, white 51%);
    background-size: 5000% 1.2em;
    background-position: left center;
    transition: background-position 2s;
}

.text:hover {
    background-position: right center;

}

.text:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, red, yellow);
    z-index: -1;
    background-size: 100% 1.2em;
    line-height: 1.2em;
}

<div class="container">
    <p class="text">This is some multi-line text...</p>
</div>

Answer 2

Unfortunately, it is not possible to achieve the desired effect in the way you want.

I have discovered a method that can create a similar effect using a background-image that overlays the underlying image. By setting a slightly inclined transition from white to transparent and moving it from left to right, you can cover and uncover the background image beneath.

.container {
    width: 100px;
}

.text {
    position: relative;
    font-size: 30px;
    line-height: 1.2em;
    background-image: linear-gradient(to left top, transparent 49%, white 51%);
    background-size: 5000% 1.2em;
    background-position: left center;
    transition: background-position 2s;
}

.text:hover {
    background-position: right center;

}

.text:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, red, yellow);
    z-index: -1;
    background-size: 100% 1.2em;
    line-height: 1.2em;
}

<div class="container">
    <p class="text">This is some multi-line text...</p>
</div>

Answer 3

Answer №2

Implement the repeating-linear-gradient function

.box {
    width: 200px;
}

.content {
    position: relative;
    width: 100%;
    font-size: 20px;
    line-height: 20px;
}

.content:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(180deg, transparent, transparent 20px, blue 22px, green 24px);
    z-index: -1;
}
.content:hover:after {
  background: none;
  background-color: lightblue;
}

<div class="box">
    <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit...Etiam nec nulla vitae dui sodales elementum.</p>
</div>

Answer 4

Implement the repeating-linear-gradient function

.box {
    width: 200px;
}

.content {
    position: relative;
    width: 100%;
    font-size: 20px;
    line-height: 20px;
}

.content:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(180deg, transparent, transparent 20px, blue 22px, green 24px);
    z-index: -1;
}
.content:hover:after {
  background: none;
  background-color: lightblue;
}

<div class="box">
    <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit...Etiam nec nulla vitae dui sodales elementum.</p>
</div>

The :after pseudo-element in action with multi-line text

Answer №1

Answer №2

Similar questions

Looking to locate .zip files using PHP Simple HTML DOM Parser?

Guide on navigating through various HTML pages with distinct parameters using Node.js (Express server)

Issues with rendering images in the browser due to CSS inline-block layout are causing

Tips for extracting certain characters from a URL and saving them as an ID using JavaScript

Is it possible to adjust the height of sibling divs within a sequence to match the tallest div?

Personalized Firefox Scrollbar - Rounded Corners

site with scrolling options in various directions

Update the color of the menu ID

Does the input password typically submit on its own?

What is the best way to place <a> links next to each other in the header?

Having Trouble with Your Instafeed Script

Tips for customizing css for image tags

Reorganizing Bootstrap 5 columns as the screen size changes

Step-by-step guide to creating a clickable div

Design elements using CSS within the <th> tags

Is there a method to establish varied usage permissions for a single page without any tracking?

Set HTML form elements to be shown in 'display only' mode, without any interactivity

Tips on ensuring a <video> element occupies the full height and width of the screen

Is Jquery Mobile's Table lacking responsiveness?

Tips on preserving CSS modifications made in Chrome Developer Tools Inspector to .vue file