Question

我有几列项目，将它们悬停时将显示动画的下划线效果。我遇到的问题是，每列中文本最多的项目正在为其所有兄弟姐妹设置宽度。例如，即使一个项目的内容比另一个项目的内容短得多，同一列中的两个项目将具有相同的伪元素宽度。

.wrap {
	 display: flex;
	 justify-content: center;
	 align-items: flex-start;
	 margin-top: 20px;
}
 .container {
	 display: flex;
	 flex-direction: column;
	 margin: 0 3vw;
}
 .item {
	 margin: 10px 0;
	 text-decoration: none;
	 color: #444;
	 font-weight: bold;
	 font-size: 19px;
	 letter-spacing: 2px;
	 position: relative;
	 display: block;
   font-size: 12px;
}
 .item::after {
	 position: absolute;
	 display: block;
	 content: '';
	 width: 100%;
	 left: 0;
	 transform: scaleX(0);
	 bottom: 0;
	 transition: 0.4s transform ease-in-out;
	 border-bottom: solid 2px tomato;
	 transform-origin: 100% 50%;
}
 .item:hover::after {
	 transform: scaleX(1);
	 transform-origin: 0 50%;
}

<div class="wrap">
  <div class="container">
  <a href="#" class="item">Long Phrase Goes Here</a>
  <a href="#" class="item">Test Test</a>
  <a href="#" class="item">Test Test</a>
  <a href="#" class="item">Test Test</a>
  <a href="#" class="item">Test Test</a>
</div>
<div class="container">
  <a href="#" class="item">Long Phrase Goes Here</a>
  <a href="#" class="item">Test Test</a>
  <a href="#" class="item">Test Test</a>
  <a href="#" class="item">Test Test</a>
  <a href="#" class="item">Test Test</a>
</div>
</div>

Answer 1

您可以在align-items: flex-start上添加.container，以便使项目占据其内容的宽度：

.wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 20px;
}

.container {
  display: flex;
  flex-direction: column;
  margin: 0 3vw;
  align-items: flex-start;
}

.item {
  margin: 10px 0;
  text-decoration: none;
  color: #444;
  font-weight: bold;
  font-size: 19px;
  letter-spacing: 2px;
  position: relative;
  display: block;
  font-size: 12px;
}

.item::after {
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  left: 0;
  transform: scaleX(0);
  bottom: 0;
  transition: 0.4s transform ease-in-out;
  border-bottom: solid 2px tomato;
  transform-origin: 100% 50%;
}

.item:hover::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

<div class="wrap">
  <div class="container">
    <a href="#" class="item">Long Phrase Goes Here</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
  </div>
  <div class="container">
    <a href="#" class="item">Long Phrase Goes Here</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
  </div>
</div>

Answer 2

一种可能的解决方案是将margin-right:auto添加到所有.item

.wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 20px;
}

.container {
  display: flex;
  flex-direction: column;
  margin: 0 3vw;
}

.item {
  margin: 10px 0;
  text-decoration: none;
  color: #444;
  font-weight: bold;
  font-size: 19px;
  letter-spacing: 2px;
  position: relative;
  font-size: 12px;
  
  display: block; /* Not really needed */
  margin-right: auto; /* Added */
  
  /* to visualize  */
  border: 1px solid;
  padding: 10px;
}

.item::after {
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  left: 0;
  transform: scaleX(0);
  bottom: 0;
  transition: 0.4s transform ease-in-out;
  border-bottom: solid 2px tomato;
  transform-origin: 100% 50%;
}

.item:hover::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

<div class="wrap">
  <div class="container">
    <a href="#" class="item">Long Phrase Goes Here</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
  </div>
  <div class="container">
    <a href="#" class="item">Long Phrase Goes Here</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
    <a href="#" class="item">Test Test</a>
  </div>
</div>

Answer 3

display:block上的

.item导致了此...为达到您想要的效果，如第一列/容器ul li中>以下代码：

.wrap { display: flex; justify-content: center; align-items: flex-start; margin-top: 20vh; } .container { display: block; flex-direction: column; margin: 0 3vw; } .container:nth-child(2) .item, .container:nth-child(3) .item { display: block; } .item { margin: 10px 0; text-decoration: none; color: #444; font-weight: bold; font-size: 19px; letter-spacing: 2px; position: relative; } .item::after { position: absolute; display: inline-block; content: ''; width: 100%; left: 0; transform: scaleX(0); bottom: 0; transition: 0.4s transform ease-in-out; border-bottom: solid 2px tomato; transform-origin: 100% 50%; } .item:hover::after { transform: scaleX(1); transform-origin: 0 50%; } .container ul li { list-style: none; margin: 10px 0; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <div class="wrap"> <div class="container"> <ul> <li> <a href="#" class="item">Long Phrase Goes Here</a> </li> <li> <a href="#" class="item">Test Test</a> </li> <li> <a href="#" class="item">Test Test</a> </li> <li> <a href="#" class="item">Test Test</a> </li> <li> <a href="#" class="item">Test Test</a> </li> </ul> </div> <div class="container"> <a href="#" class="item">Long Phrase Goes Here</a> <a href="#" class="item">Test Test</a> <a href="#" class="item">Test Test</a> <a href="#" class="item">Test Test</a> <a href="#" class="item">Test Test</a> </div> <div class="container"> <a href="#" class="item">Long Phrase Goes Here</a> <a href="#" class="item">Test Test</a> <a href="#" class="item">Test Test</a> <a href="#" class="item">Test Test</a> <a href="#" class="item">Test Test</a> <a href="#" class="item">Test Test</a> </div> </div>

如何获得伪元素以尊重直亲父母的宽度而忽略兄弟姐妹的宽度

3 个答案: