Всем привет
Сделал кнопку пуск/пауза для сайта, вот минимальный код:
body {
background-color: #494949;
}
.play-button {
display: table;
margin-left: auto;
margin-right: auto;
background-color: #888;
color: green;
font-size: 30px;
text-align: center;
width: 1.2em;
padding: .2em;
border-radius: 10%;
cursor: pointer;
appearance: none;
}
.play-button:after {
content: "\25B6";
}
.play-button:checked:after {
content: "\23F8";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<input type="checkbox" class="play-button" title="play">
</body>
</html>
Всё работает без js, только не могу найти как после нажатия кнопки менять значение атрибута title. Возможно ли это сделать средствами CSS?