html - 在文字后面制作圆形边框 - 而不是周围

Question

我会尝试使用我以前见过的东西并用 html/css 重新创建它。这是我在 Word 中制作的模型。

我找到的几乎所有内容都是关于在 圆圈内的文本，而不是后面的重音，就像这幅图一样。我希望圆圈和文本尽可能居中。

这是我最好的尝试:https://jsfiddle.net/FNdXz/559/

#container
{
  height:400px;
  width:400px;
  background-color: #ccc;
  display: table-cell;
}

#inner
{
  height:200px;
  width:200px;
  background:transparent;
  border-radius: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  margin-left:25%;
  margin-top:25%;
  border: 1px solid white;
}

#test {
  color: black;
  text-align: center;
  vertical-align: middle;
  font-size: 50px;
}

#sub-test {
  color: blue;
  text-align: center;
  font-size: 30px;
}

<div id="container">
    <div id="test">
      Hello World
    </div>
    <div id="sub-test">
      Test, this is only a test
    </div>
    <div id="inner">
    </div>
</div>

显然，我以后可以担心字体和颜色 - 但我真的很难定位，需要专业人士的帮助。

Answer 1

用 svg 创建一个圆很简单。您可以使用 flexbox 将容器中的所有内容居中。

然后使用 position: absolute 和较低的 z-index 将 svg 居中放置在文本后面。

#container {
  height: 400px;
  width: 400px;
  background-color: #ccc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#container>div {
  z-index: 1;
}

#test {
  color: black;
  font-size: 50px;
}

#sub-test {
  color: blue;
  font-size: 30px;
}

svg {
  position: absolute;
  z-index: 0;
}

<div id="container">
  <div id="test">
    Hello World
  </div>
  <div id="sub-test">
    Test, this is only a test
  </div>
  <svg height="200" width="200">
  <circle cx="100" cy="100" r="100" stroke="white" stroke-width="1" fill="transparent"/>
</svg>
</div>