0
<div class="hot-card" ::before="background:red;"></div>

Примерно так должно выглядить, но как реализовать не знаю может есть что-то подобное? Атрибуты там.. И нет через css и не как потому-что у меня это нужно задать именно этому блоку, а если прописать в css то задаст всем..

2 ответа 2

1

::before -- псевдоэлемент, а стили в атрибуте style вы прописываете для элемента, которому это свойство принадлежит. А раз элемент псевдо, то нет возможности задать его стиль таким образом.

Но выход есть. Вы можете использовать специальный класс для именно этого блока (атрибут class поддерживает несколько значений, например: class="hot-card special-class") и всё-таки описать стили псевдоэлемента в css. Или вы можете создать настоящий элемент перед блоком и задать стили для него.

2
  • Не перед блоком, в первый внутри блока
    – Grundy
    26 сен 2018 в 19:14
  • @Grundy вы правы 27 сен 2018 в 8:32
1

Можно использовать CSS переменные:

.hot-card {
  display: inline-block;
  width: 100px;
  height: 50px;
  background: black;
  position: relative;
}

.hot-card::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: var(--before-background, black);
  position: absolute;
  top: 100%;
  left: calc(50% - 10px);
}
<div class="hot-card"></div>
<div class="hot-card" style="--before-background: red;"></div>

Или как предложил @Егор Банин - использовать дополнительный класс для изменения псевдоэлементов.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.