How to get a pseudo element after an icon button label

I have the following .html code

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

      

In my style.css ...

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

      

However, the result is not desirable. Red * is placed under the label, if :: after use, red * is placed above the label.

Is there a setting to allow * to be placed immediately after the label?

If this is not currently possible, is there a best practice for paper elements to prompt the user to make this button a must?

Although this link http://www.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/

was informative, it didn't help in terms of the solution.

Please see the screenshot for what the actual and desired output should be. enter image description here

+3


source to share


1 answer


The button is a block element, so the next line displays *

. This css is putting *

inside the button and I think this is what you want.

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

      

It selects all paper-icon-buttons

that have the attribute label

and then in the shadow DOM paper-icon-button

div

with id content

and adds *

after the child div span

which is the label.

Update



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

      

This mode only paper-icon-buttons

that has the attribute required

receives *

.

+2


source







All Articles