search
HomeWeb Front-endCSS TutorialAn 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.

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

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".

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

# 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 the text-emphasis property. This is the abbreviation of the two properties text-emphasis-color and text-emphasis-style. That is to say, we can pass text-emphasis at 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.

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

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-style has several attribute values, and can enter any character;
  • text- emphasis-color can use the color values ​​used in regular web, rgba(), rgb(), etc.;

And if you want to adjust the position, then you need an additional attribute text-emphasis-position, although this attribute looks very similar to style and color , but is not one of the abbreviations text-emphasis. So for text-emphasis-position under normal circumstances, the positions we can control are the two directions of upper and lower, 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:

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

Doesn’t it look very What about the effect of underlining text like text-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;
}

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

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 the text-decoration attribute value is set by the parent to the underline style, then the child is set to overline, two line styles It will exist even if the text-decoration-style value is changed.

And text-emphasis When we change the attribute value, the result will be different. At the same time, if we do not set a color value, the color of the "emphasis mark" will inherit the text color of the element itself. Because the color value can be set, we can also use transparent to 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 itself value 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.

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

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 character will 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:

<p>文本内容,<span>一个 span 元素</span><em>是 em &yen;&#67;元素哦</em>,啊啊啊……</p>

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

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 adding line-height to the part with the "emphasis mark"? After

line-height: 20px; is added to p, no changes are seen; and if 20px is replaced with 60px, 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.

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

On a whim, when the value of line-height is relatively small, no effect is seen. Under normal circumstances, there is no text-emphasis, the smaller line-height will cause multiple lines of content to overlap, like this:

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

But now it has text-emphasis will not overlap. It seems to directly affect the minimum value of line-height. It must be ensured that the height value between multiple lines is within a certain The value seems to be about 1em, so that it can fit an "emphasis mark" that is half the normal font-size of the text, and must be kept at a certain distance from the text content. .

Back to the topic "What is the use of the unpopular text-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 the line-height will be stretched to ensure that at least 1em or 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 with emoji or 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!

Statement
This article is reproduced at:segmentfault. If there is any infringement, please contact admin@php.cn delete
A Little Reminder That Pseudo Elements are Children, Kinda.A Little Reminder That Pseudo Elements are Children, Kinda.Apr 19, 2025 am 11:39 AM

Here's a container with some child elements:

Menus with 'Dynamic Hit Areas'Menus with 'Dynamic Hit Areas'Apr 19, 2025 am 11:37 AM

Flyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you're in tricky territory. For one, they should

Improving Video Accessibility with WebVTTImproving Video Accessibility with WebVTTApr 19, 2025 am 11:27 AM

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."- Tim Berners-Lee

Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteWeekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteApr 19, 2025 am 11:25 AM

In this week's roundup: datepickers are giving keyboard users headaches, a new web component compiler that helps fight FOUC, we finally get our hands on styling list item markers, and four steps to getting webmentions on your site.

Making width and flexible items play nice togetherMaking width and flexible items play nice togetherApr 19, 2025 am 11:23 AM

The short answer: flex-shrink and flex-basis are probably what you’re lookin’ for.

Position Sticky and Table HeadersPosition Sticky and Table HeadersApr 19, 2025 am 11:21 AM

You can't position: sticky; a

Weekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryWeekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryApr 19, 2025 am 11:18 AM

In this week's look around the world of web platform news, Google Search Console makes it easier to view crawled markup, we learn that custom properties

IndieWeb and WebmentionsIndieWeb and WebmentionsApr 19, 2025 am 11:16 AM

The IndieWeb is a thing! They've got a conference coming up and everything. The New Yorker is even writing about it:

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

Atom editor mac version download

Atom editor mac version download

The most popular open source editor