CODEWITHSUNDEEP
htmlcsslayoutpseudo-element
Luke Glazebrook
Luke Glazebrook

Reputation: 580

:after pseudo-element on multi-line text

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

Answers (2)

vals
vals

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

Banzay
Banzay

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

Related Questions