如何为元素与其CSS ::before伪元素设置特定间距实现标题左上角角标

解决方案 #

你可以通过给标题元素开启相对定位，角标伪元素使用绝对定位的方式，完全灵活控制角标和文字的间距、位置，修改后的代码如下：

修改后完整CSS代码 #

.title_project_details{
    margin-bottom: 15px;
    font-family: Poppins-semi-bold;
    font-size: 29px;
    color: #210B41;
    letter-spacing: 1px;
    /* 新增属性 */
    position: relative;
    padding-left: 40px; /* 控制角标和文字的水平间距，可自行调整数值 */
}

.title_project_details::before{
    border-left: 3px solid #310C50;
    border-top: 3px solid #310C50;
    content: '';
    /* 新增/修改属性 */
    position: absolute;
    left: 0;
    top: 2px; /* 控制角标上下位置，正数向下偏移，负数向上偏移，可自行调整 */
    height: 30px;
    width: 30px;
}

参数调整说明 #

• padding-left：数值越大，角标和标题文字的水平间距越大
• top：调整角标的垂直位置，根据你的视觉效果微调即可
• 要是需要调整角标大小，直接修改伪元素的width和height属性即可

备选轻量修改方案（无需改变定位逻辑） #

如果不想改动定位规则，仅在原有伪元素属性上新增两行也可实现效果：

.title_project_details::before{
    border-left: 3px solid #310C50;
    border-top: 3px solid #310C50;
    content: '';
    display: inline-block;
    height: 30px;
    width: 30px;
    /* 新增属性 */
    margin-right: 8px; /* 控制和文字的水平间距 */
    vertical-align: top; /* 调整垂直对齐方式，也可尝试text-top、middle等值匹配效果 */
}

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