如何移除<button>内的<b></b>标签同时保留原有蓝色圆圈样式

实现方法 #

修改非常简单，只需要调整少量CSS规则再删除<b>标签即可，完全可以保留原有的蓝色边框和叉号交互效果：

1. 修改HTML结构，直接删除按钮内部的空<b>标签：

<button class="exitnew" type="button" aria-label="Close"></button>

2. 调整CSS规则：

• 找到.exitnew选择器，将原有border: none;替换为border: 5px solid blue;，把原来写在<b>标签上的蓝色边框直接移到按钮本身
• 找到.exitnew::before, .exitnew::after选择器，将原有top: 22px; left: 5px;修改为top: 17px; left: 0;，适配边框添加后的叉号位置
• 删除原来的.exitnew b对应的整段样式规则，不再需要针对<b>标签的样式定义

修改后的完整CSS如下：

.exitnew {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  box-sizing: border-box;
  margin: auto;
  padding: 0;
  width: 48px;
  height: 48px;
  cursor: pointer;
  background: transparent;
  border: 5px solid blue;
  border-radius: 50%;
  clip-path: circle(50%);
  transition: all 1s ease;
  overflow: hidden;
}

.exitnew::before,
.exitnew::after {
  content: "";
  position: absolute;
  height: 5px;
  width: 38px;
  top: 17px;
  left: 0;
  right: 5px;
  background: red;
  transform: rotate(45deg);
  transition: all 1s ease;
}

.exitnew::after {
  transform: rotate(-45deg);
}

.exitnew:hover {
  background: transparent;
}

.exitnew:hover::before,
.exitnew:hover::after {
  background: green;
}

修改后所有交互和视觉效果和原有代码完全一致，也移除了无意义的空<b>标签。

内容的提问来源于stack exchange，提问作者user17382064