CODEWITHSUNDEEP
htmlcss
Sergio Estrada
Sergio Estrada

Reputation: 236

How do I make pseudo element :before stay active?

I'm currently struggling to make my psuedo element :before stay active when clicked.

I've made a small demo of what I have here: https://jsfiddle.net/ud8p2nak/1/

I want it to stay active when you're on the current page, so if I'm on the accounts page I want my pseudo element to stay active on the Accounts page. I've tried with :active but that doesn't stay active fully. I'd appreciate the help, thank you.

<div class="side_col">

    <a href="#">
      <div class="side_link">Accounts
      </div>
    </a>
    <a href="#">
      <div class="side_link">Newsletter
      </div>
    </a>
    <a href="#">
      <div class="side_link">Operator
      </div>
    </a>
    <a href="#">
      <div class="side_link">Invoice
      </div>
    </a>


.side_col {
  float: left;
  width: 20%;
  height: 100%;
  background-color: #343A47;
}

.side_link:before {
  float: left;
  content: "";
  display: inline-block;
  height: 100%;
  width: 7px;
  background-color: #343A47;
}

.side_link:active::before {
  background-color: #24BDE9;
}

.side_link {
  text-align: left;
  line-height: 50px;
  width: 100%;
  height: 50px;
  background: #343A47;
  color: #fff;
  font-weight: 500;
}

.side_link:hover {
  background-color: #2b303b;
}

.side_link_active {
  background-color: #2b303b;
}

Upvotes: 2

Views: 1653

Answers (3)

zer00ne
zer00ne

Reputation: 43910

UPDATE

OP asked if it was possible to use :target with an additional <a> wrapped around it. Yes it is, see this test and click the last link named 'Invoice'.

FIDDLE

A CSS solution is using :target pseudo-class. It's easy:

  1. Assign an id to the element you intend to change states (on, off, active, inactive, etc.), which will be refered to as the target.
  2. Next, make an <a>nchor and assign it's href value to the target's id preceded by a # hashmark (ex. <a href='#idOfTarget'>LINK</a>).
  3. Lastly, create a CSS ruleset with the target and :target pseudo-class (ex. #idOfTarget:target { color: red; }.

SNIPPET

.side_col {
  float: left;
  width: 20%;
  height: 100%;
  background-color: #343A47;
}
.side_link:before {
  float: left;
  content: "";
  display: inline-block;
  height: 100%;
  width: 7px;
  background-color: #343A47;
}
#sl1:target:before,
#sl2:target:before,
#sl3:target:before,
#sl4:target:before {
  background-color: #24BDE9;
}
.side_link {
  text-align: left;
  line-height: 50px;
  width: 100%;
  height: 50px;
  background: #343A47;
  color: #fff;
  font-weight: 500;
}
.side_link:hover {
  background-color: #2b303b;
}
<div class="side_col">

  <a href="#sl1">
    <div id="sl1" class="side_link">Accounts
    </div>
  </a>
  <a href="#sl2">
    <div id="sl2" class="side_link">Newsletter
    </div>
  </a>
  <a href="#sl3">
    <div id="sl3" class="side_link">Operator
    </div>
  </a>
  <a href="#sl4">
    <div id="sl4" class="side_link">Invoice
    </div>
  </a>

</div>

Upvotes: 2

M.Tanzil
M.Tanzil

Reputation: 1995

You have to add an extra class to the div you want the ::before to be active. you can't apply :active like as you used. I mean you can apply :active but in your case it won't work, as when you click another element in the DOM it is then inactive.

You have to do it like this

.side_col {
  float: left;
  width: 20%;
  height: 100%;
  background-color: #343A47;
}
.side_link{
  position:relative;
  padding-left:30px;
}
.side_link:before {
  float: left;
  content: "";
  display: inline-block;
  height: 100%;
  width: 7px;
  left:0px;
  background-color: #333;
  position:absolute;
}

.side_link.active::before {
  background-color: #24BDE9;
}

.side_link {
  text-align: left;
  line-height: 50px;
  width: 100%;
  height: 50px;
  background: #343A47;
  color: #fff;
  font-weight: 500;
}

.side_link:hover {
  background-color: #2b303b;
}
<div class="side_col">

    <a href="#">
      <div class="side_link">Accounts
      </div>
    </a>
    <a href="#">
      <div class="side_link active">Newsletter
      </div>
    </a>
    <a href="#">
      <div class="side_link">Operator
      </div>
    </a>
    <a href="#">
      <div class="side_link">Invoice
      </div>
    </a>

  </div>

Upvotes: 0

Nekomajin42
Nekomajin42

Reputation: 688

The :active pseudo class is a state of a link. It is applied when the mouse button is being held down. You can't use it to refer to the active page.

To solve your problem, you should write a small script to apply a unique identifier (an ID or a class name) to the link. Something like this: https://jsfiddle.net/Nekomajin42/emajn64f/5/

Pay attention to the modified HTML and CSS! The JS is the following:

window.addEventListener("DOMContentLoaded", function()
{
    var activepage = location.pathname;
    document.getElementById(activepage).classList.add("active");
});

How it works

Let's say your page is example.com! When you click on the first link in the navbar, you go to example.com/accounts.

When your page is loaded, the DOMContentLoaded event is fired, which calls the function inside the event listener. You get the current subpage from the URL (location.pathname), then look for an element in the DOM which has the same string as an ID. If you find it, you assign the .active class, and the CSS will do the rest.

Please note, that the JS code won't work in the fiddle, since you don't actually load a page, but it will be fine if you use it in your source code.

Upvotes: 2

Related Questions