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

问题描述 投票:1回答:5

在字母或文本周围创建圆圈效果很好,但就我而言,我只想在一个单词(位于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/产生:

enter image description here

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

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

我尝试了Unicode字符(例如&#9428),该字符可以工作,但无法在浏览器中可靠地设置样式。

感谢任何指针。

html css
5个回答
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>

0
投票

使用伪元素。

尝试此: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%;
}

我的输出:my output


0
投票

尝试一下为您的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;
}

0
投票

如果要绕圈,则需要以下内容:

  • 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>

0
投票

请尝试此代码

.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>
热门问题
推荐问题
最新问题