Как применить text-transform там, где нельзя? :visited, text-transform, CSS

Question

Вот мой код:

.mainNav ul li a {
  color: black;
  font-weight: 501;
  transition: all .5s;
}

.mainNav ul li a:hover {
  font-size: 20px;
}

.mainNav ul li a:visited {
  text-transform: uppercase;
}

<nav class="mainNav">
  <ul>
    <li>
      <a href="#">Home</a>
    </li>

    <li>
      <a href="part.html">Participate</a>
    </li>
  </ul>
</nav>

...который конечно же не работает, да-да. Короче, по моим размышлениям при посещении любой ссылки (в моем случае это Home, так как я еще не создал part.html), текст должен меняться с обычного на заглавные буквы. Но этого не происходит. Подскажите, что делаю не так? Если что, :hover работает спокойно.

Answer 1

Visited должен стоять до тэга hover
Только color принимается от сss. Вот
Как поменять не только цвет :visited, но и другие свойства? Можем использовать (оч. плохо) JS, пример вот - код-баян

P.S. 3й пункт это костыль с помощью jquery. Идея: :visited можно официально поменять только цвет, меняем цвет и проверяем с помощью js, если да то добавляем класс.

    $(function(){
  $("a").each(function(index, link){
    var $link = $(link);
    console.log($link.css("color"));
    //проверяем, это синий цвет ссылки, если да то добавляем класс.
    if($link.css("color") == "rgb(0, 0, 238)"){
      $link.addClass("visited");
    }
  })
});

БЛОГ НА HUSL

Как применить text-transform там, где нельзя? :visited, text-transform, CSS

Ответы (1 шт):