Question

成分：只是文字类型的输入标记。

问题：如何控制text-decoration: underline样式输入标记的大小，颜色和位置？我看到text-decoration-color可用，但只在moz网络解释器中，我想要一些跨浏览器的东西。 [编辑] 我接受JS，CSS，HTML，并不重要，但没有任何解决方法：我的问题是具体的，我想控制这个特定的属性。

Answer 1

最简单的方法是将文本修饰删除为：

text-decoration: none;

在您的css文件中

并使用

border-bottom: 1px solid #FF0000;

而不是那样，你现在可以改变颜色和大小：）

Answer 2

如果你使用

怎么办？

text-decoration: none;
border-bottom: 10px solid black;

因此您可以控制边框属性

Answer 3

编辑text-decoration就像你说的那样，颜色是可能的。但font-size，position等更难。您可以做的不是使用text-decoration添加您的帖子<p>标记为border-bottom。在这个边界，你可以改变大小和颜色。如果你想改变你应该想到的位置或其他事情，可以添加<div>和<style>来编辑所有类型的东西。

Answer 4

您只需使用CSS3 text-decoration-color property，它也适用于Chrome。

<强>演示：

a {
  text-decoration: underline;
  -webkit-text-decoration-color: green;
  text-decoration-color: green;
}

<a href="#">This is just a link</a>

注意：

请注意使用-webkit-text-decoration-color使其与Chrome兼容。

您可以查看 text-decoration-color Cross browser cpompatibility ，了解有关其浏览器支持的详细信息。

Answer 5

使用

text-decoration-color: #E18728;

text-decoration: underline dotted red;

参考链接： https://css-tricks.com/almanac/properties/t/text-decoration-skip/

https://css-tricks.com/almanac/properties/t/text-decoration-style/

https://css-tricks.com/almanac/properties/t/text-decoration-line/

https://css-tricks.com/almanac/properties/t/text-decoration-color/

Answer 6

我希望此示例帮助您：

＆＃13;

a {

  outline: none;

  text-decoration: none;

  border-bottom: 2px solid orange;

  padding-bottom: 5px;

}

＆＃13;

<a href="#">Hello World!</a>

＆＃13;

Answer 7

这是完成此任务的另一种高级方法

<强> HTML

<div class="underline-text"> This is Underlined text </div>

<强> CSS

.underline-text{
      position:relative;
      padding-bottom:5px;
      display:inline-block;
 }

 .underline-text:after{
      position: absoulte;
      bottom: 0px;
      content: " ";
      width:100%;
      background:red;
      height:2px;
      left:0px;
 }

这是codepen。 https://codepen.io/sajiddesigner/pen/QvgeGO

你可以在那里做实验。

Answer 8

text-decoration是text-decoration-color, text-decoration-style和text-decoration-line的简写属性。

syntax{
  text-decoration : text-decoration-line text-decoration-style text-decoration-
  color;
}

a{
  text-decoration : underline red double;
}

因此，您可以简单地使用text-decoration或individually定义each property。

text-decoration-line - 是一种分配给元素的样式，可以是下划线，直线，上线等。

text-decoration-color - 是否为元素指定了颜色。

text-decoration-style - 表现得很像 border-style，所以你可以使用double，solid，dotted和这样的属性值。

您可以在此site上阅读更多内容。

为了兼容浏览器检查caniuse，因为部分属性得到部分支持。

a{
  text-decoration-line:underline;
  text-decoration-color:red;
  text-decoration-style:double;
}

<a href="#">Text Decoration</a>

Answer 9

文字装饰的颜色和风格

CSS中的文本修饰受限。 specs in CSS3表示你有这些设置但实际上只有firefox支持它们：

text-decoration-line
text-decoration-style
text-decoration-color

文字装饰的大小

您可以通过font-style属性稍微控制一行的大小。因此，您可以看到它与字体大小相关。

p {
  text-decoration: underline;
}

#test1 {
  font-size: 14px;
}

#test2 {
  font-size: 40px;
}

<p id="test1">test 1</p>
<p id="test2">test 2</p>

文字装饰的位置

有属性text-underline-position。但作为其他属性，它主要是not supported by the major Browsers。很遗憾，无法控制文本装饰的位置。

控制文本修饰：不使用border属性下划线

9 个答案: