主页 / 问题 / 1060452
Accepted
HamSter
Asked:2020-12-19 02:06:41 +0000 UTC2020-12-19 02:06:41 +0000 UTC

标题处的响应式装饰破折号

  • 772

有一个标题，内容多样，两侧带有装饰性破折号：

* {
  box-sizing: border-box;
}

.title {
  font-size: 2.5rem;
  line-height: 1.2;
  font-family: cursive;
  text-align: center;
}

.title span {
  padding-left: 10px;
  padding-right: 10px;
  display: inline-block;
  position: relative;
}

h2.title span {
  display: inline;
}

.title span:before, 
.title span:after {
    content: '';
    position: absolute;
    height: 2px;
    width: 42px;
    background: red;
    top: 50%;
    margin-top: 3px;
}

.title span:before {
    right: 100%;
}

.title span:after {
    left: 100%;
}
<h1 class="title">
  <span>Lorem ipsum.</span>
</h1>
  
<h2 class="title">
  <span>Lorem ipsum dolor.</span>
</h2>

该问题发生在移动分辨率上。我尝试inline-block和inline。

在此处输入图像描述

问题：如何在移动分辨率上使破折号尽可能接近文本（无论内容和字长）？

html

1 个回答

  1. Best Answer

    h1,
h2 {
  font-size: 2.5rem;
  line-height: 1.2;
  font-family: cursive;
  display: flex;
  align-items: center;
  justify-content: center;
}

span {
  width: 60%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

span::before,
span::after {
  content: '';
  height: 2px;
  min-width: 42px;
  background: red;
}
    <h1>
  <span>Lorem ipsum.</span>
</h1>

<h2>
  <span>Lorem ipsum dolor.</span>
</h2>

    • 3

相关问题