主页 / 问题 / 1601695
Accepted
Solevoy
Asked:2024-12-05 16:21:06 +0000 UTC2024-12-05 16:21:06 +0000 UTC

HTML、CSS。如何为 ::before ::after 设置响应宽度

  • 772

我有两个标题，旁边应该有几行。一个标题很宽，另一个则不宽，因此这些标题的线距块边缘的距离不同。如何根据文本的宽度设置线条的宽度？ 第一个标题

在此输入图像描述

和代码

.caption::before, .caption::after{
    background-color: #ad4b57;
    content: "";
    height: 1px;
    width: 35.5%;
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.caption::before{
    margin-right: 1em;
}

.caption::after{
    margin-left: 1em;
}
html

2 个回答

  1. Best Answer

    这可能就是你的意思。我只是给了块一个边框并在上面放置了一个标题。
    我这样做也是overflow: hidden为了避免溢出，因为如果不这样做，标题移动到第二行，高度就会改变，不再美观。我希望这种方法适合你）

    .block {
  width: 100%;
  border-top: 1px solid black;
  margin-bottom: 30px;
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
h2 {
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  background-color: white;
  padding: 0 20px;
  margin-top: -13px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
    <div class="block">
  <h2>
    Калькулятор
  </h2>
</div>
<div class="block">
  <h2>
    Наши клиенты Наши клиенты Наши клиенты Наши клиенты Наши клиенты
  </h2>
</div>
<div class="block">
  <h2>
    Отзывы
  </h2>
</div>

    • 0

  2. 如果这是一个测试任务，那么上面提供的选项显然不是您所要求的。它还表示第二个元素的这些条纹必须比第一个元素短。这项任务并不像乍看起来那么艰巨。如果我正确理解了条件，那么这就是解决方案。

    body {
  margin: 0;
  font-family: Roboto, sans-serif;
}

section {
  position: relative;
  overflow: hidden;
  width: 100%;
  text-align: center;
  margin: 20px auto;
}

.title {
  display: inline;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  z-index: 2;
  background-color: #fff;
  padding: 0 20px;
}

.dec_line:before,
.dec_line:after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  height: 1px;
  width: 50vw;
  background-color: #000;
  z-index: -1;
}

.dec_line:before {
  left: -50vw;
}

.dec_line:after {
  right: -50vw;
}

.dec_line_short:before,
.dec_line_short:after {
  width: 50vw;
}

.dec_line_short:before {
  left: calc(-40vw);
}

.dec_line_short:after {
  right: -40vw;
}
    <section>
  <h2 class="title dec_line">Our Works</h2>
</section>

<section>
  <h2 class="title dec_line dec_line_short">Reviews</h2>
</section>

    对于媒体旋转，与移动显示类似，您需要选择宽度参数值。

    • 0

相关问题