Making an object into a clickble object that leads to an url

Hello everyone, 

I hope you are well. 

I am trying to customize my site with CSS and I am currently at the stage of trying to assign a URL to an object, I am doing this with the help of ChatGPT, ill list bellow my code, the block im trying to change and the url + my sites url. Let me know if im missing anything. 

PS
The code I have works great and it seems to make my object into a button but for some reason it does not lead my to my desired url?

SITE: https://www.lucvrhovnik.com/
Desired URL: https://www.lucvrhovnik.com/editing
BLOCK: #block-yui_3_17_2_1_1683364613487_1815
CODE:

#block-yui_3_17_2_1_1683364613487_1815 {
  cursor: pointer;
  position: relative;
  z-index: 1;
}

#block-yui_3_17_2_1_1683364613487_1815::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#block-yui_3_17_2_1_1683364613487_1815::after {
  background-color: transparent;
}

#block-yui_3_17_2_1_1683364613487_1815::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

#block-yui_3_17_2_1_1683364613487_1815::before {
  pointer-events: none;
}

#block-yui_3_17_2_1_1683364613487_1815::after {
  pointer-events: auto;
}

#block-yui_3_17_2_1_1683364613487_1815::before,
#block-yui_3_17_2_1_1683364613487_1815::after {
  display: block;
}

#block-yui_3_17_2_1_1683364613487_1815::after {
  content: "";
}

#block-yui_3_17_2_1_1683364613487_1815::before,
#block-yui_3_17_2_1_1683364613487_1815::after {
  transition: opacity 0.3s ease;
}

#block-yui_3_17_2_1_1683364613487_1815:hover::before,
#block-yui_3_17_2_1_1683364613487_1815:hover::after {
  opacity: 0;
}

#block-yui_3_17_2_1_1683364613487_1815:hover {
  color: inherit;
}

#block-yui_3_17_2_1_1683364613487_1815::before,
#block-yui_3_17_2_1_1683364613487_1815::after {
  pointer-events: none;
}

#block-yui_3_17_2_1_1683364613487_1815::after {
  pointer-events: auto;
}

/* Change the URL to the desired destination */
#block-yui_3_17_2_1_1683364613487_1815::after {
  cursor: pointer;
  pointer-events: auto;
}

#block-yui_3_17_2_1_1683364613487_1815::after {
  content: "https://www.lucvrhovnik.com/editing";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
}
 

I would suggest that you are attempting to do this in the hardest way. 

If you create an PNG image that is an orange circle with a transparent background, and replace the shape with an image block, you can add your link to that, no coding needed.

(TBH I don't think there's actually a way to add a click-through link via CSS, you would need javascript, or write it in HTML)

Nicee, thank you for the info Ziggy much appricated. Haha sometimes you gotta learn the hard way 🙂