[英]How can I vertically align text in my footer and also remove underline from ::after content
So I have two questions: 所以我有两个问题:
(I'm justing line-height with the height of footer to align one line but it leaves huge gaps between two or more lines) (我将行高与页脚高度对齐以对齐一行,但在两行或更多行之间留有巨大的空隙)
(so all Links will look on hover like the last one) (因此所有链接都将像上一个一样在悬停时显示)
HTML & CSS HTML和CSS
footer { position: absolute; left: 0; bottom: 0; width: 100%; min-height: 50px; line-height: 50px; text-align: center; margin-top: auto; margin-bottom: auto; color: white; background-color: #232323; } footer a { cursor: pointer; } footer a:hover { text-decoration: underline; } footer a:not(:last-child)::after { content: " | "; cursor: default; }
<footer> <a>Link</a> <a>Link</a> <a>Link</a> <a>Link</a> <a>Link</a> <a>Link</a> <a>Link</a> <a>Link</a> <a>Link</a> <a>Link</a> <a>Link</a> <a>Link</a> <a>Link</a> <a>Link</a> <a>Link</a> <a>Link</a> <a>Link</a> <a>Link</a> <a>Link</a> <a>Link</a> <a>Link</a> <a>Link</a> <a>Link</a> <a>Link</a> <a>Link</a> </footer>
JSFIDDLE 的jsfiddle
https://jsfiddle.net/qmbbtmb5/ https://jsfiddle.net/qmbbtmb5/
You can make it work like you want by adding position: absolute
css property to the :after
pseudo selector. 您可以通过向:after
伪选择器添加position: absolute
css属性来使其按需工作。 Try adjusting your css code like this one. 尝试像这样调整您的CSS代码。
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
min-height: 50px;
text-align: center;
line-height: 1.5;
margin-top: auto;
margin-bottom: auto;
color: white;
background-color: #232323;
padding: 30px 0;
}
footer a {
cursor: pointer;
display: inline-block;
position: relative;
margin: 0 5px;
}
footer a:hover {
text-decoration: underline;
}
footer a:not(:last-child)::after {
content: " | ";
cursor: default;
position: absolute;
top: 0;
right: -10px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.