我在创建网页标题时遇到问题。 这是标题:
<!DOCTYPE html>
<html>
<head>
<style>
.title {
border-top: 2px solid grey;
color: grey;
text-size:20px;
}
</style>
</head>
<body>
<div class="title">Düsseldorf markets</div>
</body>
</html>我需要将市场词移动到底部，它应该像这样显示:
Düsseldorf
markets
知道如何仅在 CSS 的帮助下做到这一点吗(即如何更改标题 CSS 类以获得所需的 View )？
最佳答案
如果您确实只想使用 CSS，则可以使用 CSS hack 来实现此目的。首先，通过将文本设置为背景颜色来使文本消失。然后使用 before 和 after 选择器重新呈现内容。
但是，更简单的方法是在 HTML 中使用 span 标记，然后让每个标记都具有 display: block 来换行。
示例:
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--font_size: 20px;
--text_col: grey;
--text_margin: 10px;
}
.title {
border-top: 2px solid grey;
font-size: var(--font_size);
color: white;
}
.title:before {
content: "Düsseldorf";
color: var(--text_col);
position: absolute;
left: 10px;
top: var(--text_margin);
}
.title:after {
content: "markets";
color: var(--text_col);
position: absolute;
left: 10px;
top: calc(var(--font_size) + var(--text_margin));
}
</style>
</head>
<body>
<div class="title">Düsseldorf markets</div>
</body>
</html>关于html - 使用 CSS 更改标题外观，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62561619/