CSS ::before伪元素选择器的应用及实现效果

<style>
  .icon::before {
    content: "002";
    font-family: "Font Awesome 5 Free";
    color: red;
    margin-right: 5px;
  }
</style>

<p class="icon">CSS ::before伪元素选择器示例</p>

<style>
  .image-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .image-container:hover::before {
    opacity: 1;
  }
</style>

<div class="image-container">
  <img src="example.jpg" alt="Example Image">
</div>

<style>
  ul li::before {

    color: red;
    margin-right: 5px;
  }
</style>

<ul>
  <li>列表项一</li>
  <li>列表项二</li>
  <li>列表项三</li>
</ul>

<style>
  .custom-tag::before {
    content: "Tag: ";
    font-weight: bold;
  }
</style>

<p class="custom-tag">自定义标签示例</p>

<style>
  .container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(background.jpg);
    background-size: cover;
    opacity: 0.5;
    z-index: -1;
  }
  
  .content {
    position: relative;
    z-index: 1;
  }
</style>

<div class="container">
  <div class="content">
    <h1>背景装饰示例</h1>
    <p>这是一段示例文本。</p>
  </div>
</div>