Как использовать активный и до этого с CSS?

Question

Как использовать активный и до этого с CSS?

Я бы создал эффект с помощью CSS, используя псевдокласс ::before:active, Я создал эффект, что если вы щелкнете элемент p раньше, содержимое перед p изменится. Я думал, что это не сработало, потому что раньше p нельзя было выбрать.
Это мой код, но он не работает:

.container {
  background-color: #222;
  border-radius: 5px;
  width: 200px;
  display: block;
  margin: 0 auto;
}

.container > p {
  color: #fff;
  padding: 10px;
  text-align: center;
}

.container > p::before {
  content: 'ON';
}

p:active + p:before {
  content: 'OFF';
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container"><p></p></div>
</body>
</html>

1

html css pseudo-class

Источник

user6325737 18 май '16 в 14:04

2 ответа

Решение

Измени это правило, p:active + p:before, чтобы p:active:before

.container {
  background-color: #222;
  border-radius: 5px;
  width: 200px;
  display: block;
  margin: 0 auto;
}

.container > p {
  color: #fff;
  padding: 10px;
  text-align: center;
}

.container > p::before {
  content: 'ON';
}

p:active:before {
  content: 'OFF';
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container"><p></p></div>
</body>
</html>

4

Источник

user2827823 18 май '16 в 14:09

Другие вопросы по тегам html css pseudo-class

user19068 18 май '16 в 14:08 2016-05-18 14:08 · Accepted Answer · 2016-05-18 14:08

p:active + p:before означает псевдоэлемент, который появляется перед абзацем, который находится сразу после (другого) абзаца, на который указывает мышь при нажатой кнопке мыши.

Так как у вас есть только один абзац, это никогда не может соответствовать ничего.

Возможно, вы имели в виду p:active:before?

.container {
  background-color: #222;
  border-radius: 5px;
  width: 200px;
  display: block;
  margin: 0 auto;
}

.container > p {
  color: #fff;
  padding: 10px;
  text-align: center;
}

.container > p::before {
  content: 'ON';
}

p:active:before {
  content: 'OFF';
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container"><p></p></div>
</body>
</html>