<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
   @import url(https://fonts.googleapis.com/css?family=Slabo+27px);
* {
  box-sizing: border-box;
}

body {
  transform: translate3d(0, 0, 0);
  background: #ecf0f1;
  color: #2c3e50;
  font-size: 18px;
  font-family: "Slabo 27px", serif;
}

.code,
input,
select {
  font-family: "Monaco", monospace;
}

.container {
  padding: 1em;
}

a {
  text-decoration: none;
  color: #3498db;
}
a:hover {
  color: #5faee3;
}

p {
  margin: 2em auto;
  line-height: 1.55;
}

input:not([type=checkbox]),
select {
  font-size: 1em;
  border-radius: 0.25em;
  box-shadow: none;
  margin: 0.25em 0;
  display: block;
}

.code {
  font-size: 0.8em;
  margin-right: 1em;
}
.code .group {
  margin: 1em;
}
.code a {
  margin-bottom: 0.5em;
  display: inline-block;
}

.example {
  max-width: 500px;
}

pre {
  margin-top: 2em;
  font-size: 0.75em;
  color: #698bac;
  background: rgba(255, 255, 255, 0.3);
  border: 0.25em;
  padding: 0.25em 1em 1em;
  white-space: pre-wrap;
}

label {
  display: block;
  font-size: 0.75em;
}

.custom {
  max-width: 146px;
}

@media (min-width: 500px) {
  html,
body,
.container {
    width: 100%;
    height: 100%;
  }

  body {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row;
  }
}
  </style>
 </head>
 <body translate="no">
  <div class="container" ng-app="myApp">
   <div class="code">
    em {
    <div class="group">
     <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis">
      text-emphasis:
     </a>
     <select ng-init="style='triangle'" ng-model="style" ng-options='option as option for option in ["none", "dot", "circle", "double-circle", "triangle", "sesame", "custom"]'>
     </select>
     <label ng-hide="style=='none' || style == 'custom'">
      <input ng-init="fill='filled'" ng-model="fill" type="checkbox"/>
      outline?
     </label>
     <input class="custom" maxlength="1" ng-init="custom='⌔'" ng-model="custom" ng-show="style=='custom'" placeholder="a single value" type="text"/>
     <input ng-init="color='#3498db'" ng-model="color" type="color"/>
    </div>
    }
    <pre><code>
-webkit-text-emphasis: {{style == 'custom' &amp;&amp; (custom.length == 1 &amp;&amp; "'" + custom + "'" || custom) || style }}{{(fill == true &amp;&amp; style !='none' &amp;&amp; style != 'custom') &amp;&amp; ' open' || '' }}{{style != 'none' &amp;&amp; ' '+ color || ''}};
        text-emphasis: {{style == 'custom' &amp;&amp; (custom.length == 1 &amp;&amp; "'" + custom + "'" || custom) || style }}{{(fill == true &amp;&amp; style !='none' &amp;&amp; style != 'custom') &amp;&amp; ' open' || '' }}{{style != 'none' &amp;&amp; ' '+ color || ''}};</code></pre>
   </div>
   <div class="example">
    <style>
     em { -webkit-text-emphasis: {{style == 'custom' && (custom.length == 1 && "'" + custom + "'" || custom) || style }}{{(fill == true && style !='none' && style != 'custom') && ' open' || '' }}{{color}}; text-emphasis: {{style == 'custom' && (custom.length == 1 && "'" + custom + "'" || custom) || style }}{{(fill == true && style !='none' && style != 'custom') && ' open' || '' }}{{color}}; }
    </style>
    <p>
     This property will apply the
     <em>
      specified emphasis
     </em>
     mark to each character of the element's text, except separator characters, like spaces, and control characters.
    </p>
    <p>
     Try “custom” to type your own character.
    </p>
    <p>
     According to
     <a href="https://drafts.csswg.org/css-text-decor-3/#emphasis-marks">
      CSS Text Decoration Level 3
     </a>
     , this property is meant to support symbols near glyphs in East Asian documents.
    </p>
   </div>
  </div>
 </body>
</html>
