T形文字在css下划线

Question

我正在尝试使用此外观创建文本下划线效果：

到目前为止，我已设法创建此效果：

使用此代码：

ul,
li {
  list-style-type: none;
  margin: 10px;
  padding: 0;
  position: relative;
  float: left;
  left: 222px;
}

ul li>a:hover {
  text-decoration: none;
  position: relative;
  display: inline-block;
  color: black;
  background-color: transparent;
  font-weight: bold;
  border-bottom: 5px solid black;
}

ul li a:hover:after {
  border-bottom: 5px solid black;
  content: '';
  position: absolute;
  right: 50%;
  bottom: -3px;
  width: 25px;
  transform: translateX(100%) rotate(90deg);
  transform-origin: 0 50%;
}

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About us</a></li>
  <li><a href="#">Contact</a></li>
  <ul>

现在我需要在两个垂线的交叉处添加那个缺失的部分（可能是箭头三角形），但我不知道该怎么做。

Answer 1

您仍然可以使用:before，使用它创建三角形。

ul li>a:hover:before {
    content: '';
    display: inline-block;
    border: 15px solid transparent;
    border-top-color: #000;
    position: absolute;
    bottom: -30px;
    left: calc(50% - 15px);
}

＆＃13;

＆＃13;

ul,
li {
  list-style-type: none;
  margin: 10px;
  padding: 0;
  position: relative;
  float: left;
  left: 222px;
}

ul li>a:hover {
  text-decoration: none;
  position: relative;
  display: inline-block;
  color: black;
  background-color: transparent;
  font-weight: bold;
  border-bottom: 5px solid black;
}

ul li a:hover:after {
  border-bottom: 5px solid black;
  content: '';
  position: absolute;
  right: 50%;
  bottom: -3px;
  width: 25px;
  transform: translateX(100%) rotate(90deg);
  transform-origin: 0 50%;
}

ul li>a:hover:before {
  content: '';
  display: inline-block;
  border: 15px solid transparent;
  border-top-color: #000;
  position: absolute;
  bottom: -30px;
  left: calc(50% - 15px);
}

＆＃13;

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About us</a></li>
  <li><a href="#">Contact</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用a：before选择器，并绘制一个三角形 如何使用CSS绘制三角形解释over here。

绘制三角形后，您可以将其放在边框上。

Answer 3

使用:before和:after伪选择器来实现此目的。请查看以下代码段

ul,
li {
  list-style-type: none;
  margin: 10px;
  padding: 0;
  position: relative;
  float: left;
  left: 0;
}

ul li>a {
  text-decoration: none;
  font-weight: bold;
}

ul li>a:hover {
  text-decoration: none;
  position: relative;
  display: inline-block;
  color: black;
  background-color: transparent;
  font-weight: bold;
  border-bottom: 5px solid black;
}

ul li a:hover:after {
  content: '';
  position: absolute;
  height: 30px;
  width: 4px;
  background: black;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
}

ul li a:hover:before {
  content: "";
  position: absolute;
  border-style: solid;
  border-color: black transparent transparent transparent;
  border-width: 10px;
  bottom: -22px;
  width: 0;
  left: 0;
  right: 0;
  margin: auto;
}

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About us</a></li>
  <li><a href="#">Contact</a></li>
</ul>