Classy HTML Overdrive (Using classes to determine visibility)

states.css

.is-left-aligned
  .when-left-aligned
    display: block
  .when-right-aligned
    display: none !important
.is-right-aligned
  .when-left-aligned
    display: none !important
  .when-right-aligned
    display: block

.stateful-container
  cursor: pointer
  &.is-before-action:not(:hover)
    div.when-before-action
      display: block
    span.when-before-action
      display: inline
    .when-after-action
      display: none
    .when-hovered
      display: none
  &.is-after-action:not(:hover)
    .when-before-action
      display: none
    div.when-after-action
      display: block
    span.when-after-action
      display: inline
    .when-after-action
      font-style: italic
    .when-hovered
      display: none
  &:hover
    .when-before-action
      display: none
    .when-after-action
      display: none
    div.when-hovered
      display: block
    span.when-hovered
      display: inline

template.html

<script type='x-template' id='unfavoritedTemplate'>
  <span class='when-before-action'><i class='icon-star-empty'></i></span>
  <span class='when-hovered when-left-aligned'><i class='icon-star-empty pseudobutton'></i> Add to your starred channels</span>
  <span class='when-hovered when-right-aligned'>Add to your starred channels <i class='icon-star-empty pseudobutton'></i></span>
  <span class='when-after-action'><i class='icon-star-empty'></i></span>
</script>

<script type='x-template' id='favoritedTemplate'>
  <span class='when-before-action'><i class='icon-star'></i></span>
  <span class='when-hovered when-left-aligned'>Remove from your starred channels <i class='icon-star pseudobutton'></i></span>
  <span class='when-hovered when-right-aligned'><i class='icon-star pseudobutton'></i> Remove from your starred channels</span>
  <span class='when-after-action'><i class='icon-star'></i></span>
</script>