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

Enhancing infinite scroll functionality with ajax integration

Is it possible to trim a video using HTML code?

The functionality of bootstrap.styl malfunctions during the parsing process in stylus

Steps to handle the change event of a p:inputText element

Updating the chosen option using jQuery

What is the best way to achieve a seamless CSS transition for my sticky navigation bar?

What are the steps to applying strike-through text in Vue.js?

"Activate the mat-checkbox based on the outcome of a certain process

Using inline style instead of relying on the quill editor's built-in classes, as classes may not be accessible in order to render HTML effectively

When a radio button is checked, add a class to its parent element that has a specific class assigned to it

Interactive pop-up messages created with CSS and JavaScript that appear and fade based on the URL query string

Using AngularJS and the ng-show directive, you can set a <div> element to

Unable to overlay a div on top of an image

Modify the static navigation menu to a dynamic menu in Wordpress

``CSS: Styling a Rounded Div with a Clipped Scrollbar

Responsive HTML5 audio player adjusts size when viewed on mobile devices

Running a Chrome content script once an AJAX request has been triggered by the <body> element

HTML/CSS - Enhances user experience by zooming in on select tag when tapped on mobile devices

Instructions on adjusting the height of a flexbox container to utilize the available space

How can validation of input fields be implemented in React Js?