在H1标签内的字母周围创建圆圈

Question

在字母或文本周围创建圆圈效果很好，但就我而言，我只想在一个单词（位于H1标签内）中圈出一个字母：

.large {
  font-size: 5em;
}

.circle {
  border-radius: 50%;
  padding: -0.5% 5% 0% 5%;
  background: #fff;
  border: 10px solid red;
  color: red;
}

<h1 class="large">
  <span class="circle">e</span>Text
</h1>

提琴在这里：https://jsfiddle.net/henzen/zwph2nsv/4/产生：

[注意，该圆符合H1高度（我认为）-我需要将其垂直压缩，即垂直填充必须与水平方向相同，并紧紧围绕“ e”。

这是否可行，或者我需要在HTML中将“ e”与“文本”完全分开吗？

我尝试了Unicode字符（例如＆＃9428），该字符可以工作，但无法在浏览器中可靠地设置样式。

感谢任何指针。

Answer 1

您可以使用伪元素。

    .large {
      font-size: 5em;
    }

   .circle {
     position: relative;
     color: red;
    }
    
    .circle:after {
      content: '';
      width: 39px;
      height: 44px;
      border: 4px solid red;
      position: absolute;
      border-radius: 50%;
      left: -5px;
      top: 27px;
    }

<h1 class="large">
  <span class="circle">e</span>Text
</h1>

Answer 2

使用伪元素。

尝试此：https://jsfiddle.net/2gtazqdy/12/

* {
 margin: 0;
 padding: 0;
}

.large {
  font-size: 5em;
}


.circle {
  height: 50px;
  width: 50px;
  display: inline-block;
  padding-left: 20px;
}

.circle::after {
  display: inline-block;
  height: 50px;
  width: 50px;

  z-index: 1;
  position: absolute;
  top: 18px;
  left: 4px;

  content: "";

  color: red;

  background: transparent;
  border: 10px solid red;
  border-radius: 50%;
}

我的输出：

Answer 3

尝试一下为您的html做<h1> <span> C </span> ircle </h1>

然后在CSS中定义您的h1跨度并将其填充为矩形，可以使用此=

padding: 20px 10px;

然后添加边框，例如=

border: 5px solid #ddd;

然后最后给它提供一个边界半径，要弄清楚这有点麻烦，但只要试着处理像素，您最终就会正确地得到您想要的。例如=

Border-radius: 20px

您的html：

<h1> <span> C </span>ircle </h1>

您的总CSS：

h1 span{
    padding: 20px 10px;
    border: 5px solid #ddd;
    border-radius: 20px;
}

Answer 4

如果要绕圈，则需要以下内容：

• display: inline-block（或display: block）
• 相同宽度，高度和行高
• text-align: center

使用em对应于容器的font-size。

示例

.large {
  font-size: 5em;
}

.circle {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  line-height: 0.8em;
  text-align: center;
  border-radius: 50%;
  background: #fff;
  border: 0.05em solid red;
  color: red;
}

<h1 class="large">
  <span class="circle">e</span>Text
</h1>

Answer 5

请尝试此代码

.large{
		    text-align: center;
	    font: 26px Arial, sans-serif;
	}
	.circle {
	    border-radius: 50%;
	    background: #fff;
	    border: 2px solid #666;
	    padding: 4px 10px;
	    color: #666;
	    text-align: center;
	    font: 26px Arial, sans-serif;
	}

<h1 class="large">
  <span class="circle">e</span>Text
</h1>