If a shape keyword is specified but neither filled nor open is specified, filled is assumed. If only filled or open is specified, the shape keyword computes to circle in horizontal typographic modes and sesame in vertical typographic modes.
text-emphasis-style: value; object.style.textEmphasisStyle = "value"; <'text-emphasis-style'> = none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string> filled The shape is filled with solid color.
dot Display small circles as marks. The filled dot is U+2022 (•), and the open dot is U+25E6 (◦).
circle Display large circles as marks. The filled circle is U+25CF (●), and the open circle is U+25CB (○).
double-circle Display double circles as marks. The filled double-circle is U+25C9 (◉), and the open double-circle is U+25CE (◎).
triangle Display triangles as marks. The filled triangle is U+25B2 (▲), and the open triangle is U+25B3 (△).
sesame Display sesames as marks. The filled sesame is U+FE45 (﹅), and the open sesame is U+FE46 (﹆).
<string> Specifies a sequence of characters delimited by double quotes (") or single quotes (').
<!doctype html>
<html>
<head>
<style>
em
{
font-size: 32px;
text-emphasis-style: filled;
}
</style>
</head>
<body>
<em>filled</em>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
em
{
font-size: 32px;
text-emphasis-style: open;
}
</style>
</head>
<body>
<em>open</em>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
em
{
font-size: 32px;
text-emphasis-style: dot;
}
</style>
</head>
<body>
<em>dot</em>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
em
{
font-size: 32px;
text-emphasis-style: circle;
}
</style>
</head>
<body>
<em>circle</em>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
em
{
font-size: 32px;
text-emphasis-style: double-circle;
}
</style>
</head>
<body>
<em>double-circle</em>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
em
{
font-size: 32px;
text-emphasis-style: triangle;
}
</style>
</head>
<body>
<em>triangle</em>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
em
{
font-size: 32px;
text-emphasis-style: sesame;
}
</style>
</head>
<body>
<em>sesame</em>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
em
{
font-size: 32px;
text-emphasis-style: "s";
}
</style>
</head>
<body>
<em>string</em>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
em
{
font-size: 32px;
}
</style>
</head>
<body>
<button>initial</button>
<button>none</button>
<button>filled</button>
<button>open</button>
<button>dot</button>
<button>circle</button>
<button>triangle</button>
<button>sesame</button>
<button value="'s'">string</button><br>
<em>text-emphasis-style</em>
<script>
function myfunction(myparameter)
{
const mytarget = myparameter.target;
const myproperty = mytarget.value || mytarget.innerHTML;
document.querySelector("em").style.textEmphasisStyle = myproperty;
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>