16.文本下划线位置 (text-underline-position)

text-underline-position CSS属性指定应用于文本时下划线的位置，允许在有下降字符和不同书写模式下进行正确定位。

📖 本章概述

text-underline-position属性为我们提供了对下划线相对位置的精确控制，特别是在处理包含下降字符（如g、j、p、q、y）的文本和不同书写模式时。这个属性解决了传统下划线可能与字符下降部分重叠的问题，提升了文本的可读性和美观性。

🎯 学习目标

• 理解text-underline-position的基本概念和语法

• 掌握不同位置值的使用方法和效果

• 学会处理下降字符的下划线定位

• 了解在不同书写模式中的应用

• 掌握与其他文本装饰属性的配合使用

• 学会创建适合不同语言和排版需求的下划线

🚀 text-underline-position基础

基本语法

/* 关键字值 */ text-underline-position: auto; text-underline-position: from-font; text-underline-position: under; /* 书写模式相关值 */ text-underline-position: left; text-underline-position: right; /* 组合值 */ text-underline-position: under left; text-underline-position: under right; /* 全局值 */ text-underline-position: inherit; text-underline-position: initial; text-underline-position: revert; text-underline-position: unset;

核心概念

• auto: 浏览器确定位置（默认值）

• from-font: 使用字体文件中的首选下划线位置信息

• under: 将下划线放置在文本下降字符的下方

• left: 在垂直书写模式中，将下划线放在文本左侧

• right: 在垂直书写模式中，将下划线放在文本右侧

🎨 基础应用示例

简单的位置控制

/* 默认位置 */ .default-position { text-decoration-line: underline; /* 浏览器默认位置 */ } /* 下方位置 */ .under-position { text-decoration-line: underline; text-underline-position: under; text-decoration-color: #3b82f6; } /* 字体定义位置 */ .from-font-position { text-decoration-line: underline; text-underline-position: from-font; text-decoration-color: #10b981; }

处理下降字符

/* 包含下降字符的文本 */ .text-with-descenders { font-size: 1.5rem; line-height: 1.8; } /* 默认位置（可能与下降字符重叠） */ .descenders-default { text-decoration-line: underline; text-decoration-color: #ef4444; } /* 下方位置（避免与下降字符重叠） */ .descenders-under { text-decoration-line: underline; text-underline-position: under; text-decoration-color: #10b981; }