)
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; }
)
