WordPress中span设为block后width未生效问题求助

我最近在开发WordPress网站时碰到个头疼的问题：每个作品集条目里默认显示的portfolio-type span元素位置异常，我想要把它调整成目标样式——上方两个方块是当前的默认效果，下方两个是我期望的效果：

为了修复这个问题，我尝试了以下CSS代码：

/* 给父元素设置相对定位，让子元素可以基于它做绝对定位 */
.tmb.tmb-iso-w4.tmb-iso-h4.tmb-light.tmb-overlay-text-anim.tmb-reveal-bottom.tmb-overlay-anim.tmb-content-left.tmb-text-space-reduced.tmb-image-anim.grid-cat-97.tmb-id-69092.tmb-img-ratio.tmb-content-under.tmb-media-first.tmb-no-bg { 
  position: relative; 
  left: 0px; 
  top: 0px; 
} 
/* 将span改为block元素以支持宽高设置，通过content插入分隔符和空格尝试消除文字末尾空白 */
span.portfolio-type{ 
  content: "\7C\a0\a0"; 
  display:block; 
  position: absolute; 
  width: 40px; 
  left: 10%; 
  top: 100%; 
}

结果定位的问题解决了，但设置的width: 40px完全没生效——修改height是正常的，只有width存在异常：

从元素检查面板里也能看到宽度的异常情况：

需要说明的是，我只能通过CSS来调整这个WordPress内置的portfolio-type功能，不能修改核心代码。

我用到的几个思路来源：

• 父元素设置相对定位、子元素绝对定位的方案，参考了Stephen Denken的相关回答
• 把span改成block元素的方案，是因为默认inline元素不支持设置宽高属性
• 尝试在CSS content里插入空格的方案，是想解决文字末尾的空白问题

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