主页 / 问题 / 932170
Accepted
Daniil Screpchenko
Asked:2020-01-15 03:47:18 +0000 UTC2020-01-15 03:47:18 +0000 UTC

::before 和 ::after 不工作

  • 772

我有这个代码：

#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;

谁知道这是为什么-请向我解释。

html

1 个回答

  1. Best Answer

    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>

    链接：

    MDN 上的显示属性 (CSS)
    Metanit上的显示属性

    • 6

相关问题