SparkPost / heml

HEML is an open source markup language for building responsive email.
https://heml.io
MIT License
4.33k stars 157 forks source link

Pseudo-Element Styling Not Working #83

Open Soundvessel opened 5 years ago

Soundvessel commented 5 years ago

Using the documentation found here https://heml.io/docs/styling/pseudo-elements/ I was trying to use pseudo-element styling as shown in the example:

button::text {
  background: blue;
}

No effect. Tried it with the NPM develop option and also in your online editor.

The button documentation https://heml.io/docs/elements/button lists different pseudo-elements:

table::root
  table::table
    td::cell
      a::link

So I tried all manner of combinations (e.g. button::link button::a::link button::a button a::link etc) still not getting any change. How can I apply CSS to the generated button HTML these pseudo-elements reference?

Soundvessel commented 5 years ago

The button is also centered automatically so the additional styling example in https://heml.io/docs/elements/button is unnecessary. However, this means there is no example in the documentation to align the button left. Applying inline-block to button in the CSS works but the code example in https://heml.io/docs/styling/using-css#changing-element-displays says that display property can do "weird things"...

herrschuessler commented 5 years ago

Aligning the button to the left is possible by setting margin: 0 on the button.