text-emphasis-position

Baseline 广泛可用 *

此特性已经十分成熟，可在许多设备和浏览器版本上使用。自 2022 年 3 月起，它已在各浏览器中可用。

* 此特性的某些部分可能存在不同级别的支持。

text-emphasis-position CSS 属性设置着重号的绘制位置。与 <ruby> HTML 元素渲染的文本类似，如果着重号没有足够的空间，行高会增加。

试一试

text-emphasis-position: auto;

text-emphasis-position: over right;

text-emphasis-position: under right;

text-emphasis-position: auto;
writing-mode: vertical-rl;

text-emphasis-position: over left;
writing-mode: vertical-rl;

text-emphasis-position: over right;
writing-mode: vertical-rl;

<section id="default-example">
  <p>
    I'd far rather be
    <span class="transition-all" id="example-element">happy than right</span>
    any day.
  </p>
</section>

p {
  font: 1.5em sans-serif;
}

#example-element {
  text-emphasis: filled double-circle #ffb703;
}

语法

css

/* Initial value */
text-emphasis-position: auto;

/* Keyword values */
text-emphasis-position: over;
text-emphasis-position: under;

text-emphasis-position: over right;
text-emphasis-position: over left;
text-emphasis-position: under right;
text-emphasis-position: under left;

text-emphasis-position: left over;
text-emphasis-position: right over;
text-emphasis-position: right under;
text-emphasis-position: left under;

/* Global values */
text-emphasis-position: inherit;
text-emphasis-position: initial;
text-emphasis-position: revert;
text-emphasis-position: revert-layer;
text-emphasis-position: unset;

值

该属性接受一个或两个值

如果只提供一个值，它可以是 auto、over 或 under。当只使用 over 或 under 时，right 被假定为默认位置。
如果提供两个值，它们必须包含 over 或 under 中的一个，以及 right 或 left 中的一个。它们的顺序无关紧要。

值包括

auto: 在水平书写模式下在文本上方绘制标记，在垂直书写模式下在文本右侧绘制标记。
over: 在水平书写模式下在文本上方绘制标记。
下: 在水平书写模式下在文本下方绘制标记。
right: 在垂直书写模式下在文本右侧绘制标记。
left: 在垂直书写模式下在文本左侧绘制标记。

描述

着重号的首选位置取决于语言。例如，在日语中，首选位置是 over right。而在中文中，首选位置是 under right。下面的信息表格总结了中文、蒙古语和日语的首选着重号位置。

Emphasis marks appear over each emphasized character in horizontal Japanese text.

Emphasis marks appear on the right of each emphasized character in vertical Japanese text.

首选着重号和注音位置
语言	首选位置	图示
日语	over	right
韩语
蒙古语
中文	下	right

注意： text-emphasis-position 不能使用 text-emphasis 缩写属性设置，因此也不能重置。

正式定义

初始值	`auto`
应用于	所有元素
继承性	是
计算值	同指定值
动画类型	离散

正式语法

text-emphasis-position = 
  [ over | under ]   &&
  [ right | left ]?

示例

添加着重号位置

使用下拉菜单更改着重号的位置。这将更改 <section> 元素上的类，从而更新文本上着重号的位置。

HTML

<p class="unsupported">
  The <code>auto</code> value is not supported in your browser.
</p>
<label for="position">Emphasis position:</label>
<select id="position">
  <option value="auto">auto</option>
  <option value="over-right">over right</option>
  <option value="over-left">over left</option>
  <option value="under-right">under right</option>
  <option value="under-left">under left</option>
  <option value="preferred">preferred</option>
</select>

html

<section id="setting" class="auto">
  <p class="horizontal" lang="zh">你好世界</p>
  <!-- Hello World in Chinese -->
  <p class="vertical" lang="ja">世界、こんにちは。</p>
  <!-- Hello World in Japanese -->
</section>

CSS

.unsupported {
  color: red;
}
@supports (text-emphasis-position: auto) {
  .unsupported {
    display: none;
  }
}
.horizontal {
  writing-mode: horizontal-tb;
}
.vertical {
  writing-mode: vertical-rl;
}
section {
  display: flex;
  justify-content: space-around;
}

css

section p {
  text-emphasis: filled circle tomato;
  text-emphasis-position: auto;
}
.over-right p,
.preferred p [lang="ja"] {
  text-emphasis-position: over right;
}
.over-left p {
  text-emphasis-position: over left;
}
.under-right p,
.preferred p [lang="zh"] {
  text-emphasis-position: under right;
}
.under-left p {
  text-emphasis-position: under left;
}
.preferred p [lang="ja"] {
}

const position = document.querySelector("#position");
const setting = document.querySelector("#setting");
const updateClass = () => {
  const currentClass = setting.classList;
  setting.classList.replace(currentClass, position.value);
};
position.addEventListener("change", updateClass);

结果

使用“着重号位置”下拉菜单选择着重号的位置。下拉菜单中的 preferred 选项使用首选位置，如描述部分所述。

着重号优先于注音

一些编辑者倾向于在着重号与注音冲突时隐藏着重号。在 HTML 中，这可以通过以下样式规则实现

css

ruby {
  text-emphasis: none;
}

注音优先于着重号

另一些编辑者倾向于在注音与着重号冲突时隐藏注音。在 HTML 中，这可以通过以下模式实现

css

em {
  text-emphasis: dot; /* Set text-emphasis for <em> elements */
}

em rt {
  display: none; /* Hide ruby inside <em> elements */
}

规范

规范
CSS 文本装饰模块级别 3 # text-emphasis-position-property

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者在 2025 年 7 月 14 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题

语言	首选位置		图示
语言	水平	垂直	图示
日语	over	right
韩语
蒙古语
中文	下	right