For some reason, I'm trying to make the first two texts of each line appear in white, but my CSS doesn't seem to affect the span elements generated by JavaScript. Take a look at the code snippet below for more details.
I'm still learning how to navigate Stack Overflow, so please bear with me. I have included the code snippet below.
export default {
mounted(){
console.log("Hello!")
let list = document.querySelectorAll('.shinchou-menu li a')
list.forEach( link => {
let letters = link.textContent.split("");
link.textContent = "";
letters.forEach((words, i) => {
let span = document.createElement("span");
span.textContent = words
if(i < 2){
span.className = "highlight"
}
span.style.transitionDelay = `${i/10}`
link.append(span);
})
})
}
}<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #fafafa;
}
</style>
<style lang="less" scoped>
.shinchou-menu {
--heightlight-text-color: #00ACF0;
list-style: none;
li {
a {
text-decoration: none;
display: inline-flex;
background: #000;
font-size: 1.6em;
font-weight: 700;
color: var(--heightlight-text-color);
padding: 4px;
margin: 6px 0;
span.highlight {
color: #FFF;
}
}
}
}
</style><template>
<div>
<ul class="shinchou-menu">
<li><a href="#">ニュース</a></li>
<li><a href="#">ストーリー</a></li>
<li><a href="#">スターフ＆キャスト</a></li>
<li><a href="#">キャラクター</a></li>
<li><a href="#">放送·配信情報</a></li>
</ul>
</div>
</template>