I'm seeking ideas on how to achieve a specific effect without the need to wrap individual lines in inner elements like span or a.
<div class="m-linkitem">
<h1>Hover Below</h1>
<a href="#">Lorem ipsum dolor </a><br/>
<a href="#">Lorem ipsum</a><br />
<a href="#">Lorem ipsum</a><br />
</div>
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
font-family: 'Open Sans', sans-serif;
background: linear-gradient(180deg, #111, #00393c);
background-size: 400% 400%;
animation: backgroundGradient 30s ease infinite;
}
h1, h2, h3, h4 {
font-family: 'Roboto', sans-serif;
font-weight: 900;
color: #fff;
}
p {
font-size: 18px;
font-size: 1.8rem;
line-height: 26px;
}
.m-linkitem {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-51%, -50%);
-moz-transform: translate(-51%, -50%);
-ms-transform: translate(-51%, -50%);
-o-transform: translate(-51%, -50%);
transform: translate(-51%, -50%);
max-width: 500px;
width: 100%;
transform-origin: center;
animation: loadBounce 0.5s ease-in-out forwards;
}
.m-linkitem a {
transition: all 0.25s linear;
display: inline;
font-size: 22px;
font-size: 2.2rem;
line-height: 45px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
padding-bottom: 5px;
background: linear-gradient(to right, rgba(0, 209, 177, 1) 0%, rgba(39, 143, 198, 1) 98%);
background-size: 0px 2px;
background-repeat: no-repeat;
background-position: left 85%;
text-shadow: 0;
}
.m-linkitem:hover a{
background-size: 100% 1px;
text-shadow: 0 2.5px 4px rgba(0, 0, 0, 0.5);
}
This will be implemented for responsive design so number of words per line would be changing on resize and point break changes. Anyone can think of CSS way of underlining all lines simultaneously, like in the codepen example?
Thank you.
P.S. This is what animation would look like when applied to entire paragraph. Not what I'm looking for: