代码之家 › 专栏 › 技术社区 › Questionnaire

在CSS中设置伪元素维度

pseudo-element css html

-1

Questionnaire · 技术社区 · 6 年前

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更改。

基本上,我面临一个场景,在这个场景中,我有一个固定的网页布局(使用我无法控制的现有样式),为此,我希望突出显示网页的某些部分(包括一些链接)。因此,理想情况下,任何建议的解决方案都会对现有页面布局造成最小的影响,这就是为什么我尝试选择完全基于伪元素的解决方案。

2 回复 | 直到 6 年前

Mahatmasamatman 6 年前

这对你有用吗?添加位置:相对于元素,宽度:100%到伪元素为我解决了它。

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

Mitth'raw'nuruodo 6 年前

不确定这是否正是您想要的,但是您可以为实际元素添加“position:relative”,然后为::before添加“width:100%”。可以使用“overflow:hidden”和“white space:nowrap”来完全包含伪元素。

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>

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前