An in-depth analysis of the css text-emphasis property and its usage!

This article will take you to understand the css text-emphasis attribute, and introduce the use of the text-emphasis attribute through several examples.

Generally speaking, the pages we create are not for literary users, so it is unlikely that they will come into contact with the "emphasis mark" symbol. If you are familiar with word, you should know that there is a text setting in word, which is to set the "emphasis mark".

# I don’t have Word on my computer, so I searched for one on Baidu. Anyway, this is probably the effect.

So the CSS property we are going to talk about in this article is the "emphasis mark" property. We can set the text "emphasis mark" style through thetext-emphasisproperty. This is the abbreviation of the two propertiestext-emphasis-colorandtext-emphasis-style. That is to say, we can passtext-emphasisat the same time Set the "emphasis mark" character style and color, such as:

p { -webkit-text-emphasis: dot red; text-emphasis: dot red; }

Then you can see this effect.

As for whether this effect is seen in word, I don’t know. Anyway, in web pages, the emphasis marks we see are not only Character style and color can be modified, as well as size and position.

• text-emphasis-stylehas several attribute values, andcan enter any character;
• text- emphasis-colorcan use the color values used in regular web,rgba(),rgb(), etc.;

And if you want to adjust the position, then you need an additional attributetext-emphasis-position, although this attribute looks very similar tostyleandcolor, but is not one of the abbreviationstext-emphasis. So fortext-emphasis-positionunder normal circumstances, the positions we can control are the two directions ofupperandlower, that is:

• text-emphasis-position: over;
• text-emphasis-position: under;

If you want to know more, you can read the detailed introduction in MDN, which will not be described here. Then according to the above, we modify the CSS part, like this:

p { -webkit-text-emphasis: '——' rgba(255, 0, 0, .5); text-emphasis: '——' rgba(255, 0, 0, .5); -webkit-text-emphasis-position: under; text-emphasis-position: under; }

Then the result is:

Doesn’t it look very What about the effect of underlining text liketext-decoration: underline;? Then let's add another attribute of this to see the effect.

p { -webkit-text-emphasis: '——' rgba(255, 0, 0, .5); text-emphasis: '——' rgba(255, 0, 0, .5); -webkit-text-emphasis-position: under; text-emphasis-position: under; text-decoration: underline; }

These two are different attributes, and there must be differences. I won’t go into details. The main differences can also be seen through the documentation. What needs to be mentioned here is that if thetext-decorationattribute value is set by the parent to theunderlinestyle, then the child is set tooverline, two line styles It will exist even if thetext-decoration-stylevalue is changed.

Andtext-emphasisWhen we change the attribute value, the result will be different. At the same time, if wedo not set a color value, the color of the "emphasis mark" will inherit the text colorof the element itself. Because the color value can be set, we can also usetransparentto directly set the element to be transparent.

When it comes to inheritance, one thing needs to be noted here.

The text size of the "emphasis mark" is almost half of the normal text.

Recall the points mentioned earlier:

You can enter any characters;
• If the color is not set, it will inherit the
• color of the element itselfvalue can also be set to transparent;
The size of the "emphasis mark" is about half of the normal text;

Combining these points, we can play like this.

There are some places where there are no "emphasis marks", and some are blank or special characters. Some are entered casually, and some are intentional. Mainly I want to see how the "emphasis mark" is displayed in some special characters.

• Only one characterwill be displayed, regardless of whether the character is a full-width or half-width character, or even an emoji special character;
• is only a visible text character"emphasis mark" is displayed on the top;

then the code for this effect is:

文本内容，一个 span 元素是　em ¥C元素哦，啊啊啊……

So this is the end of this article? No, there is one more thing I want to say. As you can see from the rendering above, the "emphasis mark" is below or above the text, so for a normal text, the line height (line-height) is probably familiar to everyone. So what will be the effect after addingline-heightto the part with the "emphasis mark"? After

line-height: 20px;is added top, no changes are seen; and if20pxis replaced with60px, there has been a change, the height has been expanded a little; then make it bigger, expand it, and the "emphasis mark" follows the text to separate the upper and lower lines of content.

On a whim, when the value ofline-heightis relatively small, no effect is seen. Under normal circumstances, there is notext-emphasis, the smallerline-heightwill cause multiple lines of content to overlap, like this:

But now it hastext-emphasiswill not overlap. It seems to directly affect the minimum value ofline-height. It must be ensured that the height value between multiple lines is within a certain The value seems to be about1em, so that it can fit an "emphasis mark" that is half the normalfont-sizeof the text, and must be kept at a certain distance from the text content. .

Back to the topic "What is the use of the unpopulartext-emphasis?" Yes, what's the use? Apart from the normal indication that a certain part of the text content is highlighted, it doesn't seem to have any use. Unless we reuse the "emphasis number" feature to play, especially theline-heightwill be stretched to ensure that at least1emor so of space exists between multiple lines. So if we use a transparent color "emphasis mark", does it mean that this part of the text will never be superimposed?

Then combined withemojior a chaotic combination of up and down, will it create a different sky?

Looking back, a good "emphasis mark" should be left to do its own thing and be used to mark the text for emphasis. It's better not to play with it.

For more programming-related knowledge, please visit:Introduction to Programming! !

The above is the detailed content of An in-depth analysis of the css text-emphasis property and its usage!. For more information, please follow other related articles on the PHP Chinese website!