How to use active and before with CSS?


Tags: html,css,pseudo-class

Problem :

I would create an effect with CSS using pseudo-class ::before :active. I created an effect that if you click the element of p before, content before p changes. I thought that didn't work because before p can't be select.
This is my code, but doesn't work:

.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>



Solution :

p:active + p:before means The pseudo-element that appears before the paragraph which is immediately after the (other) paragraph which the mouse is pointing to while the mouse button is pressed.

Since you only have one paragraph, that can't ever match anything.

Perhaps you meant 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>


    CSS Howto..

    PHP Show Hidden Div

    How to centralise a button div

    Once nav bar reached top of window, how to keep it there?

    How do I translate an image based on its height?

    How to overlay two fonts with css

    How to set expanded menu to be shut on page load

    How to write HTML, CSS and Javascript all together in Joomla 2.5 article? [closed]

    How to get H1 content the same height in Firefox and in IE8?

    How to apply CSS directives to h3 element?

    How to show ellipsis for long cell values in kendo ui grid?

    How do you overlay two divs and make them the same height?

    How to keep styles after animation?

    how to apply conditional stylesheet $this->headLink()->appendStylesheet('css/css.css') with zend-framework

    How to give reference to static resources like css,images,java script in JSP?

    How to replace borders around modal window in Fancybox 2.1.5?

    How to align right-to-left the elements of css menu

    CSS select + select How to get first select

    When displaying an image in my directory, how to add a return (or back) button to it?

    How to add Css classes in TinyMCE editor Styles drop down through coding

    how to put links in one line [CSS]

    How do I style hyperlinks separately, using CSS?

    How to do Vertical+Horizontal centering in CSS

    How To Restrict Width of Bootstrap 3 Dropdown-Menu in Navbar

    CSS How to I align a header with a height of 2em to the bottom

    How do I access font features in CSS?

    How to exclude some text from browser zoom

    CSS-how to text-indent a nested unordered list

    How can I programmatically (in JavaScript) add “sub-divs” to divs?

    How do I offset where my fixed nav bar takes me?

    How do I use a different image for each JQuery UI Slider handle