::after 元素未显示在页面上，但在实时服务器页面中可见

Question

我在复选框输入的标签上有一个 ::after 元素。

编辑器中的实时服务器一切正常，元素可见，:checked 动画正常，一切正常。

我将代码推送到 github 上的存储库中，当我打开页面时，::after 元素未显示。

这是HTML：

    <li class="main__list-item">
         <div class="main__list-item-container">
              <input type="checkbox" id="question-1" class="main__list-question"></input>
              <label for="question-1" class="main__label">How many team members can I invite?</label>
              <p class="main__list-answer">You can invite up to 2 additional users on the Free plan. 
                                           There is no limit on team members for the Premium plan</p>
         </div>
   </li>

这是CSS：

.main__label {
    cursor: pointer;
    font-size: 1.4rem;
    color: var(--color-text-secondary);
    transition: all 0.4s;
    width: 100%; }
    .main__label::after {
      content: url("/img/icon-arrow-down.svg");
      display: inline-block;
      position: absolute;
      right: 0;
      transition: all 0.4s; }
    .main__label:hover {
      color: var(--color-text-main); }

 .main__list-question {
appearance: none;
position: absolute;
right: 0;
cursor: pointer;
outline: none; }
   .main__list-question:checked ~ .main__label::after {
    transform: rotate(180deg); }
   .main__list-question:checked ~ .main__list-answer {
    display: block;
    margin-top: 0.5em;
    color: var(--color-text-tertiary);
    animation: fadeIn 0.3s ease-in-out; }
   .main__list-question:checked + .main__label {
    font-weight: 700;
    font-size: 1.4rem; }

即使没有可见的 ::after 元素，所有动画仍然有效，字体大小变化，p 元素显示等

This is from vs code live-server

This is from github page

Answer 1

问题出在图片路径：

您必须更改 URL:

    content: url(../img/icon-arrow-down.svg);

::after 元素未显示在页面上，但在实时服务器页面中可见

::after element not showing on a page, but is visible in live-server page

html

css

github

css-selectors

pseudo-element