CSS for a group links

[albking]

Hi!

I have some links on my home page. These links have a different class name from each other so that you can apply your own style to each one.
Now I have created a style for the links but I only want it to affect these links not all. I give the example:

a{
  display: block;
  color: white;
  text-decoration: none;
  position: relative;
}

a::after{
  content: "";
  background: white;
	mix-blend-mode: exclusion;
  width: calc(85% + 20px);
  height: 0;
  position: absolute;
  bottom: -4px;
  left: -10px;
	transition: all .3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

a:hover::after{
	height: calc(100% + 8px)
}

Since I don’t want it to affect all the links (right now it modifies the styles of the main menu) I have assigned the class to modify:

a.examplelink{
  display: block;
  color: white;
  text-decoration: none;
  position: relative;
}

a.examplelink::after{
  content: "";
  background: white;
	mix-blend-mode: exclusion;
  width: calc(85% + 20px);
  height: 0;
  position: absolute;
  bottom: -4px;
  left: -10px;
	transition: all .3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

a..examplelink:hover::after{
	height: calc(100% + 8px)
}

It does not work. It only works if I do it with the first option. A general level. Is it some Cornerstone code interpretation problem?

I hope you can help me.

Thank you!

[tristup]

Hi @valbking,

Unfortunately, the custom CSS code is beyond the scope of Theme Support. I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where we answer the questions beyond normal theme support.

Thanks