Setting pseudo-element dimensions in CSS - html

Question

I am currently attempting to set the :before pseudo element width, to match the dimensions of the element itself (in this case, an anchor tag), with the aim of creating an overlay which covers the entire element. To demonstrate, for this example, I will consider Google's web page for a demo:
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, this produces the following result:
I have also attempted to set width: 100%, yet this results in container overflows. Is it possible to set the pseudo element width, to perfectly match that of the element itself (in this case, the 'Gmail'/'Images' link)? The desired result is for the overlay to fully cover each of the anchor tags, without making any CSS changes to the element itself.
Basically, I'm faced with a scenario where I have a fixed web page layout (with existing styling I have no control over), for which I would like to highlight parts of the web page (including some of the links). So, ideally any proposed solutions would cause minimal impact on the existing page layout, which is why I attempted to opt for an entirely pseudo-element based solution.

Answer 1

Does this work for you? Adding position: relative to the element, and width: 100% to the pseudo element solved it for me.
a.gb_g::before {
background-color: rgba(255, 0, 0, 0.2);
position: absolute;
content: 'hello';
display: block;
position: absolute;
width: 100%;
}
a.gb_g{
position: relative;
}
<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>

Answer 2

Not sure if this is exactly what you are looking for, but you can add "position: relative" for the actual element, then "width: 100%" for ::before. You can use "overflow: hidden" and "white-space: nowrap" to fully contain the pseudo element.
a.gb_g {
position: relative;
}
a.gb_g::before {
background-color: rgba(255, 0, 0, 0.2);
position: absolute;
content: 'overlay text long';
color: white;
display: block;
width: 100%;
overflow: hidden;
white-space: nowrap
}
<div class="gb_h gb_i">
<a class="gb_g" data-pid="23">Original Text</a> Next
</div>