Css ::before 图片显示

::before 表示在原始元素的实际内容之前表示一个可设置样式的子伪元素
::after 在原始元素的实际内容之后立即表示一个可设置样式的子伪元素。

注意: 给元素设置伪元素的时候，必须设置其content属性，浏览器才会将这些元素插入到选择的元素中。该值可以设置为空字符串：content: ""。

自己的一些感悟:

1. 伪元素:before无法直接应用于input元素上，因为input元素是一个自闭合元素，不包含任何内容。
2. 对于上面无法在input上使用的问题, 可以在其外围包一层 View 然后再去使用.
3.  在classId 前添加::before时,  可以在对classId进行 flex 布局.
`因为添加::before后,就相当于新增了一个新元素, 这样的话前面 的classId就相当于一个包含两个元素的层级, 所以使用 Flex 布局是可以生效的.`
`写的时候, 在classId 中进行布局,在::before设置样式`
这就解释了, 设置::before 后元素没有显示,需要在父类设置 display:flex

• 关于设置::before 后元素没有显示,需要在父类设置 display:flex

  1. :before元素没有"显示"，因为默认的display属性类似于display: inline;，并且您不能设置行内元素的with或height。
  2. 当您在父项上设置display: flex;时，子项就像具有宽度/高度的Flex项目一样。弹性项目align-items的初始值为normal（在此上下文中的行为类似于拉伸，请参见此处）。此值使项目具有100%的高度。
  3. 如果你不想在父元素上使用display: flex;，你可以将伪元素的默认属性改为display: inline-block;，但是你需要指定一个高度，否则它也不会显示。注意伪元素和内容之间会有一个空格。
  4. 注意设置 display: block; 和 display: inline-block 的区别
     display: block; // 标签是在上下排列的
     display: inline-block; // 标签是横向排列的

<div class="quote">
  Hello World
</div>

.quote::before {
  display:inline-block;
  content: "";
  min-width: 8px;
  min-height: 8px;
  background-color: #F7DF94;
}