试图建立一个统一的？CSS中的-mark-inside-circle

q3aa0525 于 2023-07-01 发布在其他

关注(0)|答案(6)|浏览(126)

我正在尝试使用CSS创建一个问号内圆字形。基本上看起来应该像©。

a::before {
    content: '?';
    font-size: 60%;
    font-family: sans-serif;
    vertical-align: middle;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    width: 1.8ex;
    height: 1.8ex;
    border-radius: 1ex;
    color: blue;
    background: white;
    border: thin solid blue;
}

.infolink:hover::before {
    color: white;
    background: blue;
    border-color: white;
}

<a class="infolink" href="#">a link</a>

这在Firefox上还不错，但在Chrome上，圆圈内的问号位置偏离了中心（我没有IE测试，但我假设最坏的情况）。
我不太懂字体的细微差别。这种方法可以跨平台工作吗？或者我应该给予并使用图像？我这样做是为了保持它与字体的比例。
到目前为止，调整建议的设置仅在特定情况下提供改进。似乎总是有一些字体大小，其中有超过一个舍入误差（超过1个像素）的偏心水平或垂直。我们的目标是让边框适合问号，而不是像我怀疑的那样，让边框适合包含问号的方框。
JSFiddle Link。

css

来源：https://stackoverflow.com/questions/20996228/trying-to-create-a-consistent-mark-inside-circle-in-css

6条答案

按热度按时间

2q5ifsrm1#

看看这个小提琴：http://jsfiddle.net/hg7nP/7/
只列出我改变的事情：

.infolink:before {
    font-size: 1.4ex;
    line-height: 1.8ex;
    border-radius: 1.2ex;
    margin-right: 4px;
    padding: 1px;
    text-decoration: none;
}

关于跨浏览器，它可以在所有浏览器中工作，除了IE < 9，其中border-radius无法工作。

赞(0）回复(0）举报 2023-07-01

plupiseo2#

基于Abhitalk的答案，我想出了一个响应式的方法，问号和圆圈都按基本字体大小的比例缩放，这样你就可以轻松地设置整个事情的大小：

.infolink:after {
    content: '?';
    display: inline-block;
    font-family: sans-serif;
    font-weight: bold;
    text-align: center;
    font-size: 0.8em;
    line-height: 0.8em;
    border-radius: 50%;
    margin-left: 6px;
    padding: 0.13em 0.2em 0.09em 0.2em;
    color: inherit;
    border: 1px solid;
    text-decoration: none;
}

这样使用：

<div class="infolink" style="font-size: 20px"></div>

如果你看到这可以进一步改善，你的意见是非常欢迎的！

赞(0）回复(0）举报 2023-07-01

gxwragnw3#

看起来你错过了line-height:1;添加它，它变得明显更好。
我个人认为font-size:50%看起来最好，但这是我的观点。
Updated Fiddle

赞(0）回复(0）举报 2023-07-01

hgc7kmma4#

只需使line-height与元素/伪元素的高度相同即可。

line-height:1.8ex;

赞(0）回复(0）举报 2023-07-01

yzuktlbb5#

您可以使用Unicode字符来获得更简洁的解决方案。我使用了一个问号与组合包围圈（U+20DD）

.infolink::before {
    content: '?⃝';
    display: inline-block;
    margin-right: 0.25rem;
}

赞(0）回复(0）举报 2023-07-01

xmd2e60i6#

经过测试，在Chrome、Edge和Firefox中保持一致（未测试IE）。

.in-circle {
    display: block;
    background: #4444ff;
    color: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    font-family: Verdana;
}

应用于跨度元素：

<span class="in-circle">?</span>

溶液来源：https://www.kith.org/jed/2020/04/15/two-ways-to-create-a-question-mark-in-circle-icon/
或者，您可以使用第三方库，如Font Awesome，它具有良好的跨浏览器支持。示例如下：https://www.w3schools.com/icons/tryit.asp?filename=tryicons_fa-question-circle

赞(0）回复(0）举报 2023-07-01

我来回答

试图建立一个统一的？CSS中的-mark-inside-circle

6条答案

相关问题

热门标签

最新问答