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 を使用すると、赤い * はラベルの上に配置されます。

* をラベルの直後に配置できるようにする微調整はありますか?

これが現在不可能である場合、この paper-icon-button が必要であることを paper-elements がユーザーに提案するためのベストプラクティスはありますか?

このリンク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属性を持つすべてのものを選択し、id を持つlabelのシャドウ DOM でpaper-icon-button、ラベルであるdivs 子要素の後に を追加します。divcontent *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 に答える