边框从文本 CSS 旁边开始

Question

我需要在css中做这样的事情，如何实现它（看附件）？

：

我是否需要使用 after、before 来执行类似的操作，或者我可以仅使用边框来执行此操作？有人可以帮我吗

问候

Answer 1

这可能会帮助您开始：

• 创建一个带有边框的

  <div>

• 创建一个白色背景的

  <span>

• 移动跨度，使其位于边框顶部“上方”

.border{
    border: 3px solid black;
    width: 50vw;
    height: 50vh;
}

.text{
    width: 20vw;
    display: inline-block;
    text-align:center;
    position: relative;
    top: -10px;
    left: 15vw;
    background-color: white;
}

<div class="border">
    <span class="text">SOME TEXT</span>
</div>

Answer 2

首先，创建一个包装div，并为其设置相对位置的边框。然后，您可以创建一个绝对位置的标题，并将其定位在左侧和顶部。最后为标题设置填充和背景颜色。

这是代码示例。

HTML

<div class="wrapper">
  <div class="title">
    My Heading
  </div>

  <div>
    <p>
      my description text
    </p>
  </div>
</div>

CSS

.wrapper {
  border: 1px solid;
  border-radius: 10px;
  position: relative;
  margin: 2rem;
  max-width: 400px;
  width: 100%;
  padding: 1rem;
}

.title {
  font-size: 1.5rem;
  font-weight: 600;
  background-color: white;
  position: absolute;
  left: 50%;
  top: -1rem;
  transform: translateX(-50%);
  padding: 0 1rem;
}