Currently, I am trying to adjust the width of the :before pseudo-element in order to match it with the dimensions of the element itself, specifically an anchor tag. This is part of my goal to create an overlay that completely covers the entire element. As an example, let's consider Google's web page:
a.gb_g::before {
background-color: rgba(255, 0, 0, 0.2);
position: absolute;
content: 'hello';
display: block;
position: absolute;
}<div class="gb_h gb_i">
<a class="gb_g" data-pid="23" href="https://mail.google.com/mail/?tab=wm&ogbl">Gmail</a>
</div>However, the current outcome looks like this:
https://i.sstatic.net/W9uSm.png
I have tried setting width: 100%, but encountered container overflows. Is there a way to perfectly align the pseudo-element's width with that of the element itself (in this case, the 'Gmail'/'Images' link)? The desired result is to have the overlay fully covering each anchor tag, without modifying any CSS properties of the element directly.
Essentially, I am dealing with a fixed web page layout where I cannot control the existing styling. I want to highlight certain parts of the web page, including specific links, without impacting the overall layout significantly. That's why I'm exploring a solution based solely on pseudo-elements.