CSS text-underline-position 属性-之路教程

CSS text-underline-position 属性值说明

值	描述
auto	浏览器使用自己的算法在字母基线或者下放置线路。
under	强制下划线将放在元素的文本内容下。
left	强制将元素放置在垂直写入模式下的文本的左侧。
right	强制将元素放在垂直写入模式下在文本的右侧。
above	迫使线在文本之上。
below	迫使线在文本下方。
auto-pos	与自动值相同。
initial	使属性使用其默认值。
inherit	从父母元素继承属性。

语法

text-underline-position: auto | under | left | right | above | below | auto-pos | initial | inherit;

text-underline-position 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      p {
        text-decoration: underline;
        -webkit-text-underline-position: auto;
        -ms-text-underline-position: auto;
        text-underline-position: auto;
      }
    </style>
  </head>
  <body>
    <h2>Text underline-position 属性示例</h2>
    <p>生活终归还得继续。...</p>
  </body>
</html>

具有“under”值的 text-underline-position 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      p {
        text-decoration: underline;
        -webkit-text-underline-position: under;
        -ms-text-underline-position: under;
        text-underline-position: under;
        text-decoration-color: #1c87c9;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Text underline-position 属性示例</h2>
    <p>生活终归还得继续。...</p>
  </body>
</html>

CSS text-underline-position 属性

text-underline-position 属性指定下划线在指定了文本装饰“下划线”值的元素上的位置。

Chrome 仅部分支持 text-underline-position 。

为了获得最大的浏览器兼容性，此属性使用了诸如 -webkit- for Safari、Google Chrome 和 Opera（较新版本）的扩展程序。

初始值	auto
应用于	所有元素。
继承	可继承
可动画的	无效
版本	CSS3.
DOM 语法	object.Style.TextunderLinePosition =“under”;

日期：2020-06-02 22:14:49 来源：oir作者：oir

←CSS text-transform 属性

CSS top 属性→

CSS text-underline-position 属性值说明

语法

text-underline-position 属性示例：

具有“under”值的 text-underline-position 属性示例：

目录