Understanding of text-emphasis CSS property
Tags: css, webdev, todayilearned, beginners
Published: 2021-12-14 14:12:48

 Hey Gang, Again happy to see you in <b>Secret CSS Property Series</b>. You may not be heared about <code>text-emphasis</code> css property, since it's under used in this world. But, it's quite interesting. So, can't wait and get this show on the road🎉.

<code>text-emphasis</code> css property, as the name itself define apply emphasis mark to the text. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abnp4psnye8njyc37dwg.png)

Getting curious to learn right. Then dive into the syntax following below. (<code>text-emphasis</code> is a shorthand property for <code>text-emphasis-style</code> and <code>text-emphasis-color</code>)

```css
text-emphasis: <'text-emphasis-style'> || <'text-emphasis-color'>
```

> <em>Note: we can't combine <code>text-emphasis-position</code> property in <code>text-emphasis</code> shorthand property</em>

Before diving to shorthand property, we need to get a clear idea about <code>text-emphasis-style</code> and what kind of styles are available to make our text incredible.

```css
text-emphasis-style: filled;
text-emphasis-style: open;
text-emphasis-style: dot;
text-emphasis-style: circle;
text-emphasis-style: double-circle;
text-emphasis-style: triangle;
text-emphasis-style: sesame;
text-emphasis-style: string; /* text-emphasis-style: '*' */
text-emphasis-style: none;
```
The <code>text-emphasis-color</code> CSS property sets the color of emphasis marks.

> <em>Note: If no color is present, it set <code>currentcolor</code> as default value</em>

```css
/* Initial value */
text-emphasis-color: currentcolor;

/* <color> */
text-emphasis-color: #555;
text-emphasis-color: blue;
text-emphasis-color: rgba(90, 200, 160, 0.8);
text-emphasis-color: transparent;
```
Wow still with me, you have much more patience to learn new thing. For you, I will give you a live demo for <code>text-emphasis</code>.

{% codepen https://codepen.io/preethi-dev/pen/dyVNRVZ %}

Hope you uncomplicate this property by codepen demo. Greetings from my side🌹, Finally you learned a brand new concepts and consequently, I will explain one bonus info.

The <code>text-emphasis-position</code> CSS property sets where emphasis marks are drawn and some tow values are required to work:

```css
text-emphasis-position: under right;
text-emphasis-position: under left;
text-emphasis-position: over right;
text-emphasis-position: over left;
```
Values seems little bit weird right. Don't worry gang, it's not as much as tough like you think. There are only four values: <code>over</code>, <code>under</code>, <code>left</code>, <code>right</code>.

<b>over</b>- Draws marks over the text in horizontal writing mode.
<b>under</b>- Draws marks under the text in horizontal writing mode.
<b>right</b>- Draws marks to the right of the text in vertical writing mode.
<b>left</b>- Draws marks to the left of the text in vertical writing mode.

> <em>Note: <b>The preferred position of emphasis marks depends on the language</b>.</em>

In Japanese for example, the preferred position is <code>over right</code>.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bnnac3zfbq7qavjv9n3n.png)

In Chinese, on the other hand, the preferred position is <code>under right</code>.
 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/er4y9rb6ziym1j1nucfx.gif)

Hey, Blog went to Internationalization concept and quite unexpected. however, Prepare your designs for different languages and writing modes because the <abbr>World Wide Web<abbr> is available to everyone in the world. 

Such a little long blog. If you love this blog and feel like getting a new thing today, Then drop a comment and give me a cute heart❤ because it's really lot to me. Thanks for reading!!

See you on next series👋🏻👋🏻.