Question

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

Answer 1

您可以使用:after伪元素创建自定义宽度的行。

＆＃13;

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

＆＃13;

<a href="#">VIEW ALL DEALS</a>

＆＃13;

Answer 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

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

<a class="dashed" href="#">View All Deals</a>

干杯！

Answer 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%;
}

<a class="text" href="#">VIEW ALL DEALS <span class="dash"></span></a>

如何在一个单词下添加一个小破折号？

4 个答案: