CSS трюк: получить значение свойства в другой тег CSS

Question

Я пытаюсь настроить внутренний сайт только с помощью CSS (политика компании: он не работает, поэтому сервер не будет сенсорным, на самом деле это будет сделано с расширением CSS)

И нам нужновключить значение, существующее в свойстве в HTML, в представление (видимое пользователем)

HTML выглядит так:

<div class="card card-employe" employid="a453">
    <a href=... target="_blank">
        ...
    </a>
</div>

, поэтому с помощью селектора CSS я могу вставлять текст на карточки с помощью:

.card-employe::before {
  content: "_ #EmployeID:";
}

но я мечтаю о чем-то вроде большего прогресса, например

.card-employe::before {
  content: "#EmployeID:" + this.employid;
}

, поэтому текст покажет:

#EmployeID:a453

это возможно только с помощью CSS?

Answer 1

Да, это возможно, используйте это:

.card-employe::before {
  content: "#EmployeID:" attr(employid);
}

для получения дополнительной информации о attr, посетите https://developer.mozilla.org/en-US/docs/Web/CSS/attr