Reputation: 580
Is there any way to have the styling of the :after
pseudo-element be applied on every line of some multi-line text?
The code I have is as follows:
.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>
As you can see from the example, the after element is being applied correctly but only to the last line of the text, is there any way to have this styling appear on every line?
Thanks!
Upvotes: 2
Views: 2661
Reputation: 64264
No, there is no way to get a pseudo like you want.
The only way that I have found to get this kind of efect is with a background-image that covers the underlying background image. Set on this a slightly inclined transition from white to transparent. When moved from left to right, it will cover/uncover the underlying image
.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>
Upvotes: 1
Reputation: 9470
Use repeating-linear-gradient
.container {
width: 170px;
}
.text {
position: relative;
width: 100%;
font-size: 18px;
line-height: 18px;
}
.text:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(180deg, transparent, transparent 15px, red 16px, yellow 18px);
z-index: -1;
}
.text:hover:after {
background: none;
background-color: tomato;
}
<div class="container">
<p class="text">This is some multi-line text...This is some multi-line text...This is some multi-line text...This is some multi-line text...This is some multi-line text...This is some multi-line text...This is some multi-line text...This is some multi-line text...This is some multi-line text...</p>
</div>
Upvotes: 0