html - css中的T形文本下划线

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>

现在我需要在两条垂直线的交点处添加缺失的部分(箭头向下的三 Angular 形)，但我不知道该怎么做。

Answer 1

你还有 :before 可以使用，用它创建三 Angular 形。

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

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

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