我的段落的高度/行高为50px,text-align:center是文本的中心.但是p:之前导致它的高度/行高增加,导致文本崩溃.我想要p和p:在垂直居中之前.
<p>Hover This</p> p { background: red; text-align: center; height: 50px; line-height: 50px; font-size: 14px; } p:hover:before { content: "icon"; display: inline-block; margin-right: 10px; font-size: 3em; }
文字长度各不相同所以我认为我不能只使用位置:绝对的图标…
解决方法
发生这种情况的原因是因为line-height由:before元素继承,它们也是一个内联块元素.
您可以通过在内容之前浮动:来解决此问题,从而将其从流中移除,使其不受行高影响.
HTML
<div> <p>Hover This</p> </div>
CSS
div { background: red; height: 50px; line-height: 50px; font-size: 14px; text-align:center; } div:hover p:before { content: "icon icon icon icon"; margin-right: 10px; font-size: 42px; float:left; } p { display:inline-block; margin:0px; }
原文地址:https://www.jb51.cc/html/226067.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。