HTML- Change color text after visited - html

Question

I have the following piece of code where an icon and text are displayed
<div class="group-block last">
<a class="w-inline-block" href="news.html" data-load="1">
<div class="group-image bg3"><img src="images/coffee.png" align="middle"></div>
<div class="group-title">
<div class="title-text">Relaxar-te</div>
</div>
</a>
</div>
I want to change the color of the text "Relaxar-te" after visiting this section. That means, once I returned to this page, the color of the text changed. The CSS of "title-text" is
.title-text {
line-height: 68px;
}
If tried to insert
.title-text:visited {
color: blue;
}
Unfortunately, this doesn't work. I saw many forums where they are using this way, however, it doesn't work for me or I'm missing something.

Answer 1

:visited only works for links. So what you need is
.title-text {
line-height: 68px;
}
a.w-inline-block:visited .title-text {
color: blue;
}
<div class="group-block last">
<a class="w-inline-block" href="news.html" data-load="1">
<div class="group-image bg3"><img src="images/coffee.png" align="middle"></div>
<div class="group-title">
<div class="title-text">Relaxar-te</div>
</div>
</a>
</div>

Answer 2

You can target the text in this manner:
a:visited .title-text{
color: pink;
}
<div class="group-block last">
<a class="w-inline-block" href="news.html" data-load="1">
<div class="group-image bg3"><img src="images/coffee.png" align="middle"></div>
<div class="group-title">
<div class="title-text">Relaxar-te</div>
</div>
</a>
</div>

Answer 3

:visisted only works on the a tag. .title-text is pointed to a div
you could change your code like this to fix it:
.custom-link:visited {
color:blue;
}
<div class="group-block last">
<a class="w-inline-block custom-link" href="news.html" data-load="1">
<div class="group-image bg3"><img src="images/coffee.png" align="middle"></div>
<div class="group-title">
<div class="title-text">Relaxar-te</div>
</div>
</a>
</div>