css - 如何使用 css 制作一个圆圈并将其应用于我的标题？

过去 2 小时我一直在网上搜索，试图找到如何实现这一结果:

但我不想使用图像。我试图使用 :after 选择器来实现该结果。

是否可以。

如果有人问了这个问题 200x ，我很抱歉，但我找不到它。我发誓我搜索过了。

最佳答案

您使用 :after 伪类是正确的。我的假设是您可能忘记指定 content: '' 属性。

因此，首先，您将要创建一个块并将其放置在标题的底部:

header { position: relative; }
header:after {
    content: '';
    display: block;
    height: 44px;
    margin-left: -22px;
    position: absolute;
        left: 50%;
        bottom: -22px; // Pull it out to half of its size for the semi-circle look
    width: 44px;
}

然后使用边界半径使其成为圆形:

-webkit-border-radius: 44px;
   -moz-border-radius: 44px;
        border-radius: 44px;

最终代码:

header:after {
    content: '';
    display: block;
    height: 44px;
    margin-left: -22px;
    position: absolute;
        left: 50%;
        bottom: -22px; // Pull it out to half of its size for the semi-circle look
    width: 44px;

    -webkit-border-radius: 44px;
       -moz-border-radius: 44px;
            border-radius: 44px;
}

关于css - 如何使用 css 制作一个圆圈并将其应用于我的标题？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27326007/