如何在单词下方添加小破折号？ [关闭]答案

【问题标题】：How to add a small dash under a word? [closed]如何在单词下方添加小破折号？ [关闭]
【发布时间】：2018-04-10 12:42:33
【问题描述】：

如何在单词下方添加小破折号？边框底部不起作用。

【问题讨论】：

【解决方案1】：

您可以使用:after 伪元素来创建具有自定义宽度的线条。

a {
  text-decoration: none;
  color: #335072;
  position: relative;
}
a:after {
  content: '';
  width: 40px;
  height: 4px;
  background: orange;
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
}

&lt;a href="#"&gt;VIEW ALL DEALS&lt;/a&gt;

【讨论】：

【解决方案2】：

以之前的答案为基础：

.partial-underline {
    text-transform: uppercase;
    color: #00008b;
    font: bold 20px sans-serif;
    display: inline-block;
}

.partial-underline::after {
    content: '';
    width: 20%;
    background-color: #ff4500;
    height: 4px;
    margin: 8px auto auto;
    display: block;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
    <span class="partial-underline">View all deals</span>
</body>
</html>

我也使用伪元素 'after'，但我使用 margin: auto 将文本下方的小破折号居中。要了解什么是伪元素，您可以导航到以下页面：W3Schools - CSS Pseudo Elements

【讨论】：

【解决方案3】：

您可以在此处利用 CSS 伪元素，然后使用定位对齐和常规框模型属性来为破折号提供您想要的大小。

这是我想出的，增加了一些悬停增强功能。它看起来与您在问题中分享的屏幕截图几乎相同：

body {
  font-family: Arial, sans-serif;
 }

.dashed {
  position: relative;
  
  display: inline-block;
  padding-bottom: .75em;
  
  text-align: center;
  text-decoration: none;
  
  color: #333;
}

.dashed:after {
  position: absolute;
  left: 50%;
  bottom: 0;

  width: 25px;
  height: 3px;
  
  content: "";
  transform: translateX(-50%);
  transition: width .1s ease-in-out;
  
  background-color: orange;
}

.dashed:hover:after {
  width: 40px;
}

&lt;a class="dashed" href="#"&gt;View All Deals&lt;/a&gt;

干杯！

【讨论】：

谢谢它的工作，干杯！

【解决方案4】：

试试这个：

.text {
    color: blue;
    position: relative;
    font-size: 50px;
    text-decoration: none;
}

.dash {
    color: orange;
    border-bottom: 5px solid orange;
    position: absolute;
    border-radius: 2px;
    width: 100px;
    bottom: -10px;
    left: 34%;
}

&lt;a class="text" href="#"&gt;VIEW ALL DEALS &lt;span class="dash"&gt;&lt;/span&gt;&lt;/a&gt;

【讨论】：