This is the sixth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

preface

Recently, when I listened to a little sister’s report on work arrangements in the company, I found this effect.

I felt a shock in the tiger’s body. Under my coercion, the little sister was forced to say this kind of text effect is how to make, this can not help let me imagine……

Here is the popular CSS tag :text-emphasis

compatibility

Visible to the naked eye, compatibility is not very good, so use careful

role

Emphasis: emphasis on

As the name suggests: the use of special symbols to highlight text.

grammar

Text-text-emphasis: text-text-style, text-text-text-color;

The text-emphasis is the abbreviation for text-text-style and text-text-color.

text-emphasis-color

Represents the color of the tag content. You can select named color (RED), RGB, RGBA, HEX, HSL, and HSLA as values.

text-emphasis-style

There are three main types of content used to decorate:

1. No embellishments

none

-webkit-text-emphasis: none red;

2. Built-in modifiers

[ filled | open ] || [ dot | circle | double-circle | triangle | sesame ]

The word “filled” and “open” are used to describe what follows, but you can also use “open”/” filled “alone

filed

-webkit-text-emphasis: filled red;

open

-webkit-text-emphasis: open red;

The dot points

-webkit-text-emphasis: dot red; -webkit-text-emphasis: open dot red;

-webkit-text-emphasis: filled dot red;

Circle A solid circle

-webkit-text-emphasis: circle red;

-webkit-text-emphasis: open circle red;

-webkit-text-emphasis: filled circle red;

Double-circle A solid circle with an additional contour around each circle

-webkit-text-emphasis: double-circle red;

-webkit-text-emphasis: open double-circle red; }

-webkit-text-emphasis: filled double-circle red;

Triangle, shaped like an upward arrow

-webkit-text-emphasis: triangle red;

-webkit-text-emphasis: open triangle red;

-webkit-text-emphasis: filled triangle red;

Sesame slash, shaped like a backslash (\)

-webkit-text-emphasis: sesame red;

-webkit-text-emphasis: open sesame red;

-webkit-text-emphasis: filled sesame red;

Custom characters

<string>

-webkit-text-emphasis: 'good' red;

Family members – text-text-position

Optional values include: [over | under] && | left [right]

Over draws marks on text in horizontal writing mode.

Under draws a mark under text in horizontal writing mode.

Right Draws a mark to the right of the text in vertical writing mode.

Left Draws a mark to the left of text in vertical writing mode.

So in certain cases, certain attributes are valid

Here are two examples to prove the statement:

Example 1

Both styles are set to right, but you can see the final effect. Only under and over work

     -webkit-text-emphasis-position: over right;
 
    -webkit-text-emphasis-position: under right;
Copy the code

Example 2

First we use writing-mode:vertical-rl; By putting the text upright, you can see that only the right and left properties are in effect

.textEmphasis1{
  
   
    -webkit-text-emphasis-position:under right;

    -webkit-text-emphasis-position: under left;


}
Copy the code

Finally:

1. The writing order of the position does not affect yo!

2. Both horizontal and vertical values must appear at the same time! Some browsers (I am not naming names here) can only write one, but it does not meet the specification yo!