1

У меня есть такой вот код:

#search {
 background-color: #2c3e50;
 color: white;
 border-top: 1px solid #3a4e61;
}
#search_text {
 width: 164px;
 border-right: 1px solid #3a4e61;
 padding: 29px 0px 30px 87px;
 text-transform: uppercase;
}
#search_text::after {
 content: "";
 width: 100px;
 height: 100px;
 background-color: white;
}
<div id="search">
  <div id="search_text">
    <p style="font-size: 20px; font-family: 'Roboto', sans-serif; font-weight: 400; color: #9fb0c0;">find your</p>
    <p style="font-size: 25px; font-family: 'Roboto', sans-serif; font-weight: bold;">holydays</p>
  </div>
</div>

И этот последний after не работает до тех пор пока я что-то не напишу в content (пишу content: "123" и появляется) Что делать?


Надо было написать display: block;

Кто знает зачем это - объясните мне пожалуйста.

2
  • display: block пробовали? 14 янв 2019 в 19:51
  • Нет. Попробовал - появилось. А я так и не понял почему его не было? Не могли бы вы мне объяснить пожалуйста? 14 янв 2019 в 19:53

1 ответ 1

6

display - многоцелевое свойство, которое определяет, как элемент должен быть показан в документе. Коротко говоря, свойство display позволяет изменять тип элемента HTML.

block - элемент показывается как блочный. Применение этого значения для строчных элементов, например <span>, заставляет его вести подобно блокам - происходит перенос строк в начале и в конце содержимого.

Синтаксис:

display: block;

В вашем случае необходимо добавить это свойство для желаемого отображения:

#search {
 background-color: #2c3e50;
 color: white;
 border-top: 1px solid #3a4e61;
}
#search_text {
 width: 164px;
 border-right: 1px solid #3a4e61;
 padding: 29px 0px 30px 87px;
 text-transform: uppercase;
}
#search_text::after {
 content: "";
 display: block;
 width: 100px;
 height: 100px;
 background-color: white;
}
<div id="search">
  <div id="search_text">
    <p style="font-size: 20px; font-family: 'Roboto', sans-serif; font-weight: 400; color: #9fb0c0;">find your</p>
    <p style="font-size: 25px; font-family: 'Roboto', sans-serif; font-weight: bold;">holydays</p>
  </div>
</div>

Ссылки:

Свойство display (CSS) на MDN
Свойство display на Metanit

1

Ваш ответ

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

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