Div с содержимым CSS, после того как псевдоэлемент не виден

У меня есть POC, который я должен заполнить, и мне разрешено использовать CSS только для обновления стилей продукта. Я заменил одно из изображений продукта логотипом, используя атрибут содержимого CSS.

Мне нужно добавить простую строку с номером телефона, который будет отображаться после этого логотипа. Я попытался использовать псевдоэлемент :after для этого. Это работает, только если содержимое div пусто (логотип удален).

.demo {
  content: url('http://placehold.it/350x150')
}

.demo:after {
  content: 'test';
  display: inline-block;
}
<div class="demo"></div>

Я попытался изменить display на inline-block и жестко запрограммировать height и width для обоих правил. В общем все, что смог найти. Любая помощь будет принята с благодарностью.

JSFiddle здесь: https://jsfiddle.net/qykbjznm/


css pseudo-element css-content
person ICodeGorilla    schedule 07.03.2017    source источник
comment
Возможный дубликат: stackoverflow.com/questions/6949148/   -  person pzworks    schedule 07.03.2017
comment
@pzworks: Даже не близко.   -  person BoltClock    schedule 07.03.2017

Ответы (4)


arrow_upward
13
arrow_downward

Свойство content заменяет все содержимое внутри элемента. При добавлении content к непсевдоселектору этот контент заменит псевдоселекторы ::before и ::after.

Поэтому попробуйте сделать это, используя свойство content только в псевдоселекторах ::before и ::after.

.demo:before {
     content: url('http://placehold.it/350x150')
}

.demo:after {
    content: 'some text';
    display: block;
}
<div class="demo"></div>

person Jamy    schedule 07.03.2017
comment
Просто добавлю к объяснению, что content работает только с псевдоэлементами, то есть :before и :after, поэтому использование content для .demo не удастся. - person Mr. Alien; 07.03.2017
comment
@Mr.Alien, если вы посмотрите на JSfiddle, предоставленный OP, content применяется к непсевдоселектору и отображается так же, как content внутри ::before/::after, что является основной причиной проблемы, с которой он столкнулся. - person Jamy; 07.03.2017
comment
@Г-н. Чужой: Исправление, это поддерживается только для ::before и ::after. Некоторые браузеры делают применение содержимого к фактическим элементам, но это считается нестандартным поведением. - person BoltClock; 07.03.2017
comment
@BoltClock Плохо, я имел в виду, что вам нужно иметь content для псевдоэлементов, без них он не будет отображаться. Было своего рода FYI. Спасибо, хотя ... @Jamy тоже спасибо за разъяснения. - person Mr. Alien; 07.03.2017

arrow_upward
4
arrow_downward

Вы можете заменить фон из CSS и поместить его как изображение в HTML:

.demo::after {
    content: 'test';
    display: inline-block;
}
<div class="demo">
  <img src='http://placehold.it/350x150'/>
</div>

Или даже сделать так:

.demo {
     background: url('http://placehold.it/350x150');
     height:150px;
     width:350px;
}

.demo::after {
    content: 'test';
}
<div class="demo"></div>

Есть два разных результата.

person Albzi    schedule 07.03.2017

arrow_upward
2
arrow_downward

Некоторые браузеры применяют свойство content к реальным элементам, несмотря на то, что оно не поддерживается в CSS2< /а>. Ожидается, что css-content-3 это позволит, но до тех пор, пока спецификация уровня 3 не станет стандартом, чего реально не произойдет в ближайшие несколько лет (особенно если учесть, что этого не произошло за последние 14). лет), применение content к реальным элементам следует рассматривать как нестандартное поведение.

Когда значением свойства content является изображение, это изображение вставляется как замененный контент. И когда это применяется к реальному элементу, это предотвращает наличие у элемента псевдоэлементов ::before и ::after. Вот почему ваш псевдоэлемент ::after не появляется.

Как уже упоминалось, все, что вам нужно сделать, это применить изображение к псевдоэлементу ::before элемента, а не к самому элементу.

person BoltClock    schedule 07.03.2017

arrow_upward
0
arrow_downward

Я немного повозился с вашим JSFiddle и обнаружил, что единственный реальный способ отобразить номер телефона под текущим div — это создать еще один div:

<div class="demo"></div>
<div class="demo2"></div>
<style>
  .demo {
    content: url('http://placehold.it/350x150');
    height:150px;
    width:350px;
  }

  .demo2:before {
    content: "test";
  }
</style>
person Joel Giovinazzo    schedule 07.03.2017