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

    CSS : How to remove margin between
  • How to get rid of an automatically generated span via CSS (un-display)?

    How to move one element to the right of another using CSS?

    How to avoid a th element from inheriting properties from a tr element in IE6/7

    How to align arrows using CSS or jQuery or JavaScript [closed]

    How to style form submit button in CSS?

    How to get partial scroll bar in html page?

    How can I resize svg using CSS?

    How to control the CSS of the contents that loaded dynamically into iframe?

    How to use a CSS animation within a JavaScript plugin?

    AngularJS ng-show animation cross-fade inside ng-repeat

    How to make a curved edge hexagon by using CSS

    How to make a text or html tag look like a button

    How to add and remove div's (input)

    How to line up images in a horizontal row with CSS?

    How to hide crossed-out CSS lines on firebug?

    Ext JS 4.2 - How to create a header like the one at KitchenSink sample?

    How to get rid of css inherited from a css file?

    How I can change the position of 3 div's to be side by side?

    How do I keep floated child divs from wrapping?

    How can I vertically align text within a span element, or make the span the same size as the text?

    How to fade between classes in a conditional query

    How Do I Reduce the Padding Around a Chart Within an Article

    How to set 0% css of keyframes as current css value for the element?

    How to use CSS selectors to retrieve specific links lying in some class using BeautifulSoup?

    How to get CSS styling to shown on page? [closed]

    How to provide some space between two lines of same text in css

    How to create circle, square or triangle with JavaScript in HTML?

    How to animate searchbox length from focusing on the textbox class CSS3?

    how do i inject css in gwt?