Как получить псевдоэлемент после ярлыка бумажной кнопки со значком

Question

У меня есть следующий HTML-код

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

В моем стиле.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 атрибут, а затем в тени DOM paper-icon-button div с идентификатором 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 атрибут получить *,