带图标HTML按钮加跳转链接及伪元素cursor: pointer不生效问题咨询

问题1：添加无可见锚点的跳转链接 #

推荐不需要JavaScript的方案，直接替换标签即可，不会出现任何可见锚点样式：

• 用<a>标签替换原有<button>标签，跳转地址写入href属性，继承原有按钮类名，所有样式沿用你已经写好的按钮规则，不会出现下划线等默认锚点样式：

<a href="你的Facebook主页地址" target="_blank" class="facebook-btn">
  <span class="dashicons dashicons-facebook-alt"></span>
</a>
<a href="你的Twitter主页地址" target="_blank" class="twitter-btn">
  <span class="dashicons dashicons-twitter"></span>
</a>

如果需要保留button元素，也可以直接给button加onclick点击跳转事件：<button class="facebook-btn" onclick="window.open('你的Facebook主页地址', '_blank')">

问题2：伪元素cursor: pointer不生效 #

出现该问题是因为伪元素默认不会继承父元素的交互属性，直接给两个伪元素的CSS规则补充cursor: pointer和pointer-events: auto即可，修改后的伪元素代码如下：

.custom-html-widget .facebook-btn span:after{
    font-family: Barlow;
    position: relative;
    top:7px !important;
    content: "Polub";
    font-size:18px !important;
    width:100%;
    display:block;
    /* 新增以下两行 */
    cursor: pointer;
    pointer-events: auto;
}

.custom-html-widget .twitter-btn span:after{
    font-family: Barlow;
    position: relative;
    top:7px !important;
    content: "Zaobserwuj";
    font-size:18px !important;
    width:100%;
    display:block;
    /* 新增以下两行 */
    cursor: pointer;
    pointer-events: auto;
}

修改后整个按钮区域包括伪元素显示的文字部分，都会正常显示手型光标。

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