Html 为什么 `：：before` 在使用内容 `url(svg)` 时会增加一些高度

发布于08月14日

我有以下代码:

  <div class="details"><button className="details-btn"></button>
  <div>
  <p className="title">Some content
  </p>
  </div>

具有以下样式

.details {
  display: flex
}

button::before {
  content: url('data:image/svg+xml; utf8, <svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.38128 4.61866L5.61872 3.38123L9.23743 6.99994L5.61872 10.6187L4.38128 9.38123L6.76256 6.99994L4.38128 4.61866Z" fill="black"/></svg>')
}

我想要居中的图像来自::before与段落.问题是，即使我的SVG的高度是14，得到的::before元素的高度是15.我为什么以及如何解决这个问题(我必须使用::before)

推荐答案

在css中，按钮的尺寸被设置为与图像匹配，并且它的位置是相对的.::BEFORE伪元素绝对位于按钮内，其背景图像使用变换和背景属性居中.这可确保图像与段落对齐.

function toggleOpen(button) {
  button.classList.toggle('is-open');
}

.details {
  display: flex;
  align-items: center; /* Vertical center alignment */
  gap: 5px;
}
button{
  position: relative; /* Add relative positioning */
  width: 13px; /* Set width of button */
  height: 14px; /* Set height of button */
  border: none;
  background-color: transparent;
  transition: transform 0.3s ease; /* Adding a transition for smooth animation */
}
button::before {
  background-image: url('data:image/svg+xml; utf8, <svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.38128 4.61866L5.61872 3.38123L9.23743 6.99994L5.61872 10.6187L4.38128 9.38123L6.76256 6.99994L4.38128 4.61866Z" fill="black"/></svg>');
background-repeat: no-repeat; /* Prevent image from repeating */
  content: ''; /* Clear default content */
  position: absolute; /* Position the pseudo-element */
  top: 50%; /* Position it vertically */
  left: 50%; /* Position it horizontally */
  transform: translate(-50%, -50%); /* Adjust positioning */
  width: 13px; /* Set width of image */
  height: 14px; /* Set height of image */
  transition: transform 0.3s ease; /* Adding a transition for smooth animation */
}
button.details-btn.is-open::before {
transform: translate(-50%, -50%) rotate(90deg); /* Rotate the arrow icon when the button has is-open class */
}

<div class="details">
  <button class="details-btn" onclick="toggleOpen(this)"></button>
  <div>
    <p class="title">Some content</p>
  </div>
</div>