html - 如何垂直对齐页脚中的文本并从 ::after 内容中删除下划线
问题描述
所以我有两个问题:
1. 如何将页脚中的文本垂直对齐两行或多行?
(我将行高与页脚的高度对齐以对齐一行,但它在两行或多行之间留下了巨大的间隙)
2. 如何从 CSS ::after 内容中删除下划线,但将其保留在文本下方。
(所以所有链接都会像最后一个一样悬停)
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
https://jsfiddle.net/qmbbtmb5/
解决方案
position: absolute
您可以通过将css 属性添加到:after
伪选择器来使其按您想要的方式工作。尝试像这样调整您的 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;
}
推荐阅读
- angular - 使用 ng serve 启动 Angular 和 dotnet core Angular
- r - R Shiny 应用程序创建一个包含复选框的表格
- python - 解码 Traceback 消息
- spring - Spring Boot,使用 MariaDB 和 JWT OAuth2 的身份验证流程
- python - 在文档字符串中使用输入模块
- python - Pdf到图像的转换需要大量的空间
- .net - 正则表达式前瞻仅删除最后一个字符
- video - 在 .net 中显示有关 Raspberry pi 的视频
- android - 如何将一堆视图分组并一起更改它们的可见性
- json - 将 JSON 中的自定义字符串映射到 POGO 枚举案例