如何始終將偽元素放在父元素而不是子元素之后？

Question

我想要實現的是始終在標簽的第一個孩子之后顯示星星。

<label for="input-1" class="required">
   <span>
    Text
   </span>
  <span class="tooltip">
   <i class="icon"></i>
  <span class="message top">Tooltip on the top, with a very long message.</span>
 </span>
</label>

  &.required:after {
    content: '*';
    color: @link-blue;
    margin-left: 4px;

    &:first-child:after {
      content: '*';
    }

  }

在這種情況下，星號位於圖標之后。 我怎樣才能強制它總是在第一個孩子之后，在這種情況下是 label 文本。

Answer 1

你需要把偽裝在它的第一個孩子身上（ .required > *:first-child ）而不是它自己。 你想要的是：

&.required {
    > *:first-child::after {
        content: '*';
        color: @link-blue;
        margin-left: 4px;
    }
}

 .required > *:first-child::after { content: "*"; margin-left: 4px; color: red; }

 <label for="input-1" class="required"> <span>Text</span> <span class="tooltip"> <i class="icon"></i> <span class="message top">Tooltip on the top, with a very long message.</span> </span> </label>

編輯

如果要為label有或沒有子元素的兩種情況都添加星號，有幾種解決方案。

推薦第一個，但是你需要在 class 到label中添加一個額外的工具提示（在本例.has-tooltip ），這樣你就可以區分這兩種情況並相應地分配::before （因為:has '尚未得到廣泛支持）。

 .required.has-tooltip > *:first-child::after, .required:not(.has-tooltip)::after { content: "*"; margin-left: 4px; color: red; }

 <label for="input-1" class="required has-tooltip"> <span>Text</span> <span class="tooltip"> <i class="icon"></i> <span class="message top">Tooltip on the top, with a very long message.</span> </span> </label> <br /> <label for="input-1" class="required">Text</label>

第二個不需要任何 HTML 修改，但它會更改 label 的display並通過order操作 position 元素。 您可以嘗試一下，看看它是否對您的布局有任何副作用。

 .required { display: inline-flex; }.required::after { content: "*"; margin-left: 4px; color: red; }.required > *:not(:first-child) { order: 1; }

 <label for="input-1" class="required"> <span>Text</span> <span class="tooltip"> <i class="icon"></i> <span class="message top">Tooltip on the top, with a very long message.</span> </span> </label> <br /> <label for="input-1" class="required">Text</label>