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

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;
  }

它选择所有具有label 属性的paper-icon-buttons，然后在paper-icon-button 的影子DOM 中选择ID 为div 的content，并在div 子元素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;
  }

这种方式只有具有required 属性的paper-icon-buttons 才能获得*。