html - CSS create border on one side with sharp square edges

Question

everyone, I am trying to add border to one side of a a element, however, when I add it to one side it give it a sharp diagonal edge:

I am trying to remove the sharp edge and make it a square.

I have tried using pseudo-elemnts to achieve this but I have had no luck:

Currently, I am using:

a{
  border-left: 2px solid rgba(0, 0, 0, 0.9) !important;
  border-left-width: 0;
  border-radius: 0px;
  position: relative;
}

a::before{
  border-left: 2px solid rgba(0, 0, 0, 0.9) !important;
  border-radius: 0px;
  position:absolute;
  content:'';
}

But this is still giving me the results below. How can I do this successfully?

Answer 1

See if this works for you:

box-shadow: -10px 0 0 0 black;

Just that, no borders.