Установка размеров псевдоэлемента в CSS - PullRequest
Новая
       102

Установка размеров псевдоэлемента в CSS

0 голосов
/ 22 февраля 2020

В настоящее время я пытаюсь установить ширину псевдоэлемента: 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>

Однако это дает следующий результат:

Gmail and Images links from Google's web page - showing overlays with incorrect dimensions

У меня также есть попытался установить width: 100%, но это привело к переполнению контейнера. Можно ли установить ширину псевдоэлемента, чтобы она точно соответствовала ширине самого элемента (в данном случае это ссылка «Gmail» / «Изображения»)? Желаемый результат заключается в том, чтобы оверлей полностью покрывал каждый из тегов привязки, не внося CSS изменений в сам элемент.

По сути, я столкнулся со сценарием, в котором у меня есть фиксированный макет веб-страницы (с существующим стилем, который я не могу контролировать), для которого я хотел бы выделить части веб-страницы (включая некоторые из ссылки). Таким образом, в идеале любые предлагаемые решения должны оказывать минимальное влияние на существующий макет страницы, поэтому я попытался выбрать решение, полностью основанное на псевдоэлементах.

Ответы [ 2 ]

0 голосов
/ 22 февраля 2020

Не уверен, что это именно то, что вы ищете, но вы можете добавить «position :lative» для фактического элемента, затем «width: 100%» для :: before. Вы можете использовать «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>
0 голосов
/ 22 февраля 2020

Это работает для вас? Положение добавления: относительно элемента, а ширина: 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>
...