3

我有以下 .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/

内容丰富，但在解决方案方面没有帮助。

请查看屏幕截图，了解实际和期望的结果应该是什么样的。在此处输入图像描述

4

1 回答 1

2

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

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

它选择所有paper-icon-buttons具有label属性的，然后在带有 id 的影子 DOM 中，paper-icon-button并div在作为标签的 divs 子元素之后content添加。 *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属性的才能获得*.

于 2014-10-06T05:11:53.187 回答