: после псевдоэлемента на многострочном тексте - PullRequest
Новая
       9

: после псевдоэлемента на многострочном тексте

0 голосов
/ 02 июня 2018

Есть ли способ применить стиль псевдоэлемента :after к каждой строке многострочного текста?

У меня следующий код: 

.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>

Как видно из примера, элемент after применяется правильно, но только к последней строке текста, есть ли способ получить этостиль появляется на каждой строке?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 03 июня 2018

Нет, нет способа получить псевдо, как вы хотите.

Единственный способ, которым я нашел, чтобы получить этот вид эффекта, это с background-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>
0 голосов
/ 02 июня 2018

Использование 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>
...