How create a specific space between an element and it pseudo-element "::before" ? CSS-CodePudding

I would like to create this corner in the top-left of my title:

The problem is that I didn't find the way to decale the title from the corner.

Could you help me pls ?

This is my code:

<h2 class="title_project_details">{project.name}</h2>

.title_project_details{
    margin-bottom: 15px;

    font-family: Poppins-semi-bold;
    font-size: 29px;
    color: #210B41;
    letter-spacing: 1px;
}

.title_project_details::before{
    border-left: 3px solid #310C50;
    border-top: 3px solid #310C50;
    content: '';
    display: inline-block;
    height: 30px;
    width: 30px;
}

    .title_project_details{
        margin-bottom: 15px;

        font-family: Poppins-semi-bold;
        font-size: 29px;
        color: #210B41;
        letter-spacing: 1px;
    }

    .title_project_details::before{
        border-left: 3px solid #310C50;
        border-top: 3px solid #310C50;
        content: '';
        display: inline-block;
        height: 30px;
        width: 30px;
    }

<h2 class="title_project_details">{project.name}</h2>

My actual result:

Thanks in advance !

CodePudding user response：

Try positioning the elements set relative for the title and set absolute for the ::before

.title_project_details{
    margin-bottom: 15px;

    font-family: Poppins-semi-bold;
    font-size: 29px;
    color: #210B41;
    letter-spacing: 1px;
  position: relative;
  padding: 3px 18px
}

.title_project_details::before{
    border-left: 2px solid #310C50;
    border-top: 2px solid #310C50;
    content: '';
    display: inline-block;
    height: 30px;
    position: absolute;
  top: 0; 
  left: 0;
    width: 30px;
}


body {margin: 20px;}

<h2 class="title_project_details">project.name</h2>

Add padding if you want space (I saw space in the reference image you showed there)

CodePudding user response：

I tried to use absolute positioning for ::before, for me it looks like your desired result. u might tweak with top and left properties.

    .title_project_details{
        margin-bottom: 15px;
        position:relative;
        font-family: Poppins-semi-bold;
        font-size: 29px;
        color: #210B41;
        letter-spacing: 1px;
    }

    .title_project_details::before{
        border-left: 3px solid #310C50;
        border-top: 3px solid #310C50;
       position: absolute;
       left: -6px;
       top: -1px;
        content: '';
        display: inline-block;
        height: 30px;
        width: 30px;
    }

<h2 class="title_project_details">{project.name}</h2>