CSS Sentence case

by gmdavis62

HTML

<label class="label-wrapper" id="dashboard-panel-chartGroupBy-dropdown">
  <div class="label-body">
    <hr aria-hidden="true" class="" data-spec="label-style-bar">
    <span data-spec="label-text" class="label-text">this was typed all lowercase but transformed with css to sentance case</span>
    <span data-spec="required-label" class="required-label">required</span>
  </div>
</label>
<label class="label-wrapper" id="dashboard-panel-chartGroupBy-dropdown">
  <div class="label-body">
    <hr aria-hidden="true" class="" data-spec="label-style-bar">
    <span data-spec="label-text" class="label-text">THIS WAS TYPED ALL UPPERCASE BUT TRANSFORMED WITH CSS TO SENTANCE CASE</span>
    <span data-spec="required-label" class="required-label">required</span>
  </div>
</label>
<label class="label-wrapper" id="dashboard-panel-chartGroupBy-dropdown">
  <div class="label-body">
    <hr aria-hidden="true" class="" data-spec="label-style-bar">
    <span data-spec="label-text" class="label-text">this was typed <span class="except">MIXED Case</span> but transformed with <span class="except">CSS</span> to sentance case and with exceptions using a class</span>
    <span data-spec="required-label" class="required-label">required</span>
  </div>
</label>

CSS

.label-text {
  font: bold .9em sans-serif;
  color: #51585D;
  display: inline-block;
  text-transform: lowercase;
}

/* start with changing everything to lowecase */
/* needs to be block level elment to work with text-transform */

.label-text::first-letter {
  text-transform: capitalize;
}

/* capitalize only the first letter */

.except {
  text-transform: initial;
}

/* if we need something to be not lowercase we enclose it in abbr tag */

.required-label {
  display: none;
}

/* just hide this for now. */