控制文本 - 任务:强调而无需使用边框属性

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

text-decoration: none; 

在您的CSS文件中并使用

border-bottom: 1px solid #FF0000; 

您现在可以更改颜色和大小：(

如果您使用

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

因此，您可以控制边界属性

您可以简单地使用css3 text-decoration-color 属性，它也可以与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浏览器CPompatibility 以获取有关其浏览器支持的更多详细信息。

正如您所说的那样，编辑text-decoration是可能的。但是font-size，position等很难。您可以做的是，而不是使用text-decoration是在您的<p>标记border-bottom上添加。在这个边界中，您可以改变尺寸和颜色。如果您想更改位置或其他内容，则应该考虑使用<style>添加CC_15来编辑所有内容。

使用

text-decoration-color: #E18728;

text-decoration: underline dotted red;

ref链接：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/

这是完成此操作的另一种高级方法

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

您可以在那里进行实验。

我希望此示例为您提供帮助：

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

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

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 - 是分配给元素的颜色。

文本 - decoration-style - 行为非常类似边界风格，因此您可以使用双重，固体，虚线和此类属性值。

您可以在此网站上阅读更多信息。

，并且要与浏览器的兼容性检查Caniuse，因为某些属性得到了部分支持。

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

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

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

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

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