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.
source to share
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 *
.
source to share