html如何给标题底部加上图片欣赏,HTML – 如何在标题的底部中间添加半圈？

使用：after伪元素：

.header:after {

content: '';

position: absolute;

background: black;

width: 50px;

height: 50px;

z-index: 1;

border-radius: 50%; /* Makes the element circular */

bottom: -25px;

left: 50%;

margin-left: -25px;

}

对于这个解决方案,溢出：隐藏;已从.header CSS中删除.

这是另一种方法,它不依赖于半圆的宽度来正确地居中：

.header:after {

content: '';

position: relative;

top: 100%;

display: block;

margin: 0 auto;

background: red;

width: 50px;

height: 25px;

border-radius: 0 0 50px 50px;

}