如何使用垂直对齐的CSS内容图像创建可共享的标头？

debugcn 发表于 Dev

罗伊

我正在尝试实现类似于GitHub的可共享标头（将其悬停在回购底部的README中的标头上，并显示一个链接图标）。我正在使用伪选择器和生成的内容图像。

问题是垂直对齐。定位标记的高度为29px，而标题的高度为25px。我试图将锚标记的行高设置为25px，但对齐方式仍然不可用。

<a href="#heading" title="Share me!" class="hover-link">
  <h3 id="heading" class="share-heading">Some awesome heading</h3>
</a>

.share-heading {
  display: inline;
}

a.hover-link {
  content: "";
  line-height: 25px;
}

a.hover-link:hover:after {
  content: url(data:URI.......);
}

保利

您可以使用另一个伪元素和一个属性作为来执行此操作content。

.share-heading {
  display: inline-block;
  padding-left: 25px;
  margin: 0;
  padding: 0;
  vertical-align:middle;
}
a.hover-link {
  display: inline-block;
  vertical-align: top;
  content: "";
  color: #279ACB;
  text-decoration: none;
  margin: 25px;
  border:1px dotted grey;
  position: relative;
  height: 25px;

}

a.hover-link:hover::after {
  position: absolute;
  content:attr(title);
  top:110%;
  left:50%;
  transform:translateX(-50%);
  border:1px solid lightblue;
  height: 1.5rem;
  line-height: 1.5rem;
  width:auto;
  white-space: no-wrap;
  display: block;
  padding:0 1rem;
  background: lightgrey;
  border-radius: .3rem;
  box-shadow: 0 0 2px 1px black;
  
}

a.hover-link:before {
  display: inline-block;
  vertical-align: middle;
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gwJDikbmKUOeQAAAnxJREFUSMft1k2IV1UYx/GP4xsm6WhCainmoptoBMGhIBhS6A0JSUlcmRCcVYajYLWpGWaVi8peRG5WUESbkhRFaONKRO8olBAcWjhFuNAaS8zIsZk2z8C/Ycb/jC3zrg7nPvd8z/N7fuc5l9sPqrqZVtXN9HZx025x8TvwAB7CfPyKM/ih5DT0nyFV3SzDdjyN+zEb1/A9DmJ/yenyLUOqulmCvdiI6biAASzGSvyJ99BXcro6+l3HFACd+AjPB+BIwLZgEz7EnMhy3ZQzqepmHg7hMczE19hecvq5JWY5PkMXPsauktNvMGMSgA7ci/14B7NwouR0YUzoJZwIyGosRHtIuOh1bA7QTAyiv6qbXpwuOd1okX5OjEda1+loU4PDeAX3YRhX0IkncQxPRaawCs/G+Bx+uWlNqrpZjANYH1MncRY/YUkUehm+xRPhrvdDqqvYUnI6OmEmUcB3WwBH8SXuxGDJqRtvhGw/Ym1sqAtDeBvHJ3RXVTdz0YeXw6aHsAN7wroD2In+kKwT27Am5NyLnpLTlZvV5EE8E4DDeKnkNIDPY5EVcR4+xVZ0BwD24bWxgH9BooAPowoZelvOwTG8gPO4C4+HPPfgMnrRXXL6a7wazxgDXBASnsfF0Rclp+tV3XyBU3g0MoLroX9/yWl4Iqe2Qoajm45gUYvnR0F/V3UzOwwxd1SiktPpKbX6qm4ewSfh+T14C79H3KpwTleEH8COktMf7SBjT/x30fgq7I4740zsfEPMD+EDvDpRDdreJ1XdLEUPXhzHfdeif705noumdDNWdbMorPxcZHMjsvwK30xGokm3+qpu7g7HjeBSyWnw//1X8w/hH8KtVkNhtAAAAABJRU5ErkJggg==);

}

<a href="{{}}#heading" title="Share me!" class="hover-link">
  <h3 id="heading" class="share-heading">Some awesome heading</h3>
</a>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-9

我来说两句

0条评论

登录后参与评论

来自分类Dev

asp：gridview标头使用CSS的垂直对齐

来自分类Dev

如何使用CSS flexbox垂直对齐和拉伸内容

来自分类Dev

如何使用CSS flexbox垂直对齐和拉伸内容

来自分类Dev

如何垂直对齐CSS列内容？

来自分类Dev

Bootstrap垂直对齐标头

来自分类Dev

如何使用flex垂直对齐图像？

来自分类Dev

CSS图像垂直对齐

来自分类Dev

如何垂直对齐图像

来自分类Dev

如何垂直对齐图像？

来自分类Dev

如何垂直对齐CSS网格卡的内容

来自分类Dev

CSS-如何垂直对齐文本和图像？

来自分类Dev

使用CSS在锚中垂直对齐图像

来自分类Dev

使用CSS在锚点内垂直对齐图像

来自分类Dev

使用CSS媒体查询使图像垂直对齐

来自分类Dev

如何垂直对齐（居中）UITableView的内容？

来自分类Dev

垂直对齐图像

来自分类Dev

垂直对齐的图像

来自分类Dev

垂直对齐图像

来自分类Dev

如何垂直对齐图像和文本

来自分类Dev

如何垂直对齐旋转的图像标题？

来自分类Dev

如何使动态创建的视图垂直对齐？

来自分类Dev

如何使文本垂直对齐顶部CSS

来自分类Dev

css列如何垂直对齐底部？

来自分类Dev

使用CSS垂直对齐文本

来自分类Dev

如何创建图像和文字垂直对齐的材质设计按钮？

来自分类Dev

Bootstrap垂直对齐图像

来自分类Dev

图像未垂直对齐

来自分类Dev

CSS：如何在响应式图像的右侧垂直对齐跨度中的文本（也在跨度中）

来自分类Dev

使用CSS在列表项上垂直对齐图像和文本

Related 相关文章

文章