在CSS中设置伪元素尺寸

Question

我目前正在尝试在伪元素宽度之前设置：before，以匹配元素本身的尺寸（在这种情况下为锚标记），目的是创建一个覆盖整个元素的覆盖图。为了演示这个例子，我将考虑使用Google的演示网页：

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&amp;ogbl">Gmail</a>
</div>

但是，这将产生以下结果：

我也尝试设置width: 100%，但这会导致容器溢出。是否可以将伪元素的宽度设置为与元素本身的宽度完全匹配（在这种情况下，为“ Gmail” /“ Images”链接）？理想的结果是使覆盖层完全覆盖每个锚标记，而无需对元素本身进行任何CSS更改。

[基本上，我遇到一种情况，我有一个固定的网页布局（我无法控制现有样式），为此，我想突出显示网页的某些部分（包括某些链接）。因此，理想情况下，任何提议的解决方案都将对现有页面布局造成最小的影响，这就是为什么我尝试选择完全基于伪元素的解决方案的原因。

Answer 1

这对您有用吗？添加位置：相对于元素，宽度：100％到伪元素为我解决了这个问题。

Answer 2

[不确定这是否正是您要寻找的，但是您可以为实际元素添加“ position：relative”，然后为:: before添加“ width：100％”。您可以使用“溢出：隐藏”和“空白：nowrap”来完全包含伪元素。