如何在纸图标按钮的标签后获取伪元素

Question

我有以下.html代码

  <paper-icon-button
    id = 'add-btn'
    label = 'NAME'
    icon = 'social:person'
    on-click = '{{ toggle }}'
    ></paper-icon-button>

在我的style.css ...

          /deep/ paper-icon-button[label]::after {
          content: " *";
          font-weight: bold;
          font-size: 150%;
          color: red;
        }

然而，结果并非如此。红色*位于标签下方，如果使用:: after，则红色*位于标签上方。

是否有调整以允许*紧跟在标签之后？

如果目前无法做到这一点，是否有纸质元素的最佳做法是向用户建议需要此纸张图标按钮？

虽然此链接http://www.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/

提供了丰富的信息，在解决方案方面没有帮助。

请参阅屏幕截图，了解实际和期望的结果。

Answer 1

按钮是一个块元素，这就是下一行显示*的原因。这个css将*放在按钮内，我认为这就是你想要的。

  * /deep/ paper-icon-button[label]::shadow div#content > span::after {
    content: " *";
    font-weight: bold;
    font-size: 150%;
    color: red;
  }

选择具有paper-icon-buttons属性的所有label，然后选择paper-icon-button {id div {id} content的影子DOM，并添加{在作为标签的divs child *元素之后{1}}。

更新

span

<paper-icon-button
  id = 'add-btn'
  label = 'NAME'
  required
  icon = 'social:person'
  on-click = '{{ toggle }}'
></paper-icon-button>

这种只有 * /deep/ paper-icon-button[label][required]::shadow div#content > span::after { content: " *"; font-weight: bold; font-size: 150%; color: red; } 属性的paper-icon-buttons才能获得required。