css 如何避免在bottom属性上为：：after使用特定像素值

jk9hmnmh 于 2023-05-23 发布在其他

关注(0)|答案(2)|浏览(106)

我有一个横幅，当悬停在显示一个“下划线”在底部的容器。目前，它是使用::after实现的，功能非常完美，但我不喜欢对bottom: -65px如此具体，它感觉有点笨拙，没有真正的响应。
例如，如果横幅不是150px，那么下划线将关闭。
在这个用例中，有没有一种方法可以避免对底部使用特定的px值？

body {
  margin: 0;
}

.banner {
  height: 150px;
  background-color: lightpink;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul {
  display: flex;
  align-items: center;
  gap: 25px;
}

ul li {
  list-style: none;
}

ul li a {
  position: relative;
  text-decoration: none;
}

ul li a::after {
  position: absolute;
  bottom: -65px;
  left: 0;
  right: 0;
  width: 0%;
  content: '';
  color: transparent;
  background: black;
  height: 3px;
}

ul li a:hover::after,
ul li a:active::after {
  transition: all 0.2s;
  width: 100%;
}

<div class="banner">
  <ul>
    <li><a href="">Option 1</a></li>
    <li><a href="">Option 1</a></li>
    <li><a href="">Option 1</a></li>
  </ul>
</div>

css

来源：https://stackoverflow.com/questions/76227517/how-to-avoid-using-specific-pixel-value-on-bottom-property-for-after

2条答案

按热度按时间

sqougxex1#

一种可能的方法是让a元素占据所有可用的高度，这样你就可以在伪元素上指定bottom: 0;，如下所示：

body {
  margin: 0;
}

.banner {
  height: 150px;
  background-color: lightpink;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}
.height-80 {
height: 80px;
}

ul {
  display: flex;
  align-items: stretch;
  gap: 25px;
  height: 100%;
  margin: 0;
}

ul li {
  list-style: none;
}

ul li a {
  display: block;
  height: 100%;
  position: relative;
  display: flex; 
  align-items: center;
}

ul li a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 0%;
  content: '';
  color: transparent;
  background: black;
  height: 3px;
}

ul li a:hover::after,
ul li a:active::after {
  transition: all 0.2s;
  width: 100%;
}

<div class="banner">
  <ul>
    <li><a href="">Option 1</a></li>
    <li><a href="">Option 1</a></li>
    <li><a href="">Option 1</a></li>
  </ul>
</div>

<div class="banner height-80">
  <ul>
    <li><a href="">Option 1</a></li>
    <li><a href="">Option 1</a></li>
    <li><a href="">Option 1</a></li>
  </ul>
</div>

另一种方法是使用CSS变量来指定头部的高度，并相应地调整伪元素的位置。
在下面的示例中，您可以通过更改--banner-height: 150px;的值来更改横幅的高度，伪元素的位置将与margin-bottom: calc(var(--banner-height) / -2);相适应（* 请注意，y还将bottom的值更改为50%*）。

:root {
  --banner-height: 150px;
}

body {
  margin: 0;
}

.banner {
  height: var(--banner-height);
  background-color: lightpink;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul {
  display: flex;
  align-items: center;
  gap: 25px;
}

ul li {
  list-style: none;
}

ul li a {
  position: relative;
  text-decoration: none;
}

ul li a::after {
  position: absolute;
  bottom: 50%;
  left: 0;
  right: 0;
  width: 0%;
  margin-bottom: calc(var(--banner-height) / -2);
  content: '';
  color: transparent;
  background: black;
  height: 3px;
}

ul li a:hover::after,
ul li a:active::after {
  transition: all 0.2s;
  width: 100%;
  width: 100%;
}

<div class="banner">
  <ul>
    <li><a href="">Option 1</a></li>
    <li><a href="">Option 1</a></li>
    <li><a href="">Option 1</a></li>
  </ul>
</div>

赞(0）回复(0）举报 2023-05-23

ih99xse12#

整个::after都不是必需的。
可以使用border-bottom声明：

body {
  margin: 0;
}

.banner {
  height: 150px;
  background-color: lightpink;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul {
  display: flex;
  align-items: center;
  gap: 25px;
}

ul li {
  list-style: none;
}

ul li a {
  position: relative;
  text-decoration: none;
  border-bottom: solid 3px #00000000;
}

ul li a:hover {
  transition: all 0.2s;
  border-bottom: solid 3px black;
}

<div class="banner">
  <ul>
    <li>
      <a href="">Option 1</a>
    </li>
    <li>
      <a href="">Option 2</a>
    </li>
    <li>
      <a href="">Option 3</a>
    </li>
  </ul>
</div>

正如你所看到的，结果会有所不同。您可以通过编辑a的高度来更改垂直位置。
这可能不是你要找的，因为下划线不会滑出，它只会“出现”。

赞(0）回复(0）举报 2023-05-23

我来回答

css 如何避免在bottom属性上为：：after使用特定像素值

2条答案

相关问题

热门标签

最新问答