CODEWITHSUNDEEP
cssmaterial-designpaper-elementscore-elements
st_clair_clarke
st_clair_clarke

Reputation: 5715

How to get a pseudoelement after the label of a paper-icon-button

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 what is desired. The red * is placed below the label, if ::after is used, the red * is placed above the label.

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

If this is impossible currently, is there a best practice for paper-elements to suggest to the user that this paper-icon-button is required?

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

was informative it did not help in terms of a solution.

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

Upvotes: 3

Views: 546

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657801

The button is a block element, this is the reason why the * is shown in the next line. This css places the * 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 a label attribute and then in the shadow DOM of the paper-icon-button the div with id content and adds the * after the divs child span element 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 way only paper-icon-buttons that have a required attribute get the *.

Upvotes: 2

Related Questions