主页 / 问题 / 1368156
Accepted
Vladimir Zhidelev
Asked:2022-06-03 22:12:57 +0000 UTC2022-06-03 22:12:57 +0000 UTC

喜欢标题上方的额外文字？[关闭]

  • 772

我也做不到——提供你的选择。在此处输入图像描述

您需要在标题上方和下方添加线条，并在其上方添加迷你文本

javascript

1 个回答

  1. Best Answer

    按照这个原理，是可以的。可以不向样式添加文本，但在跨度内执行相同操作。

    body {
  padding: 50px;
}

h2 {
  font-size: 40px;
  color: red;
  padding-top: 30px;
  padding-bottom: 30px;
  width: 100%;
  text-align: center;
  position: relative;
  border-top: 1px solid red;
  border-bottom: 1px solid red;
}

h2:before {
  content: 'над заголовком';
  position: absolute;
  top: -20px;
  height: 40px;
  width: 200px;
  margin: 0 auto;
  background-color: red;
  color: white;
  font-size: 20px;
  box-sizing: border-box;
  padding: 7px;
  left: 0;
  right: 0;
}
    <h2>Заголовок</h2>

    • 2

相关问题