make labels or badges look better

HTML

<h2 class='mb20'>List Group Demo</h2>
<div class="list-group">
    <a href="/view/code/9YAe4/make-labels-or-badges-look-better/" class="list-group-item list-group-item-action text-truncate" title="make labels or badges look better" data-toggle="tooltip"><span class="badge badge-info">css</span> make labels or badges look better</a>  
<a href="/view/code/06BMq/include-tinymce-only-if-a-user-is-logged-into-the-site/" class="list-group-item list-group-item-action text-truncate" title="include tinymce only if a user is logged into the site" data-toggle="tooltip"><span class="badge badge-info">php</span> include tinymce only if a user is logged into the site</a>  
<a href="/view/code/UXcP1/test-page-for-the-custom-css-12-grid-used-on-this-site/" class="list-group-item list-group-item-action text-truncate" title="test page for the custom css 12 grid used on this site" data-toggle="tooltip"><span class="badge badge-info">html</span> test page for the custom css 12 grid used on this site</a>  
<a href="/view/code/hVfXg/easy-twitter-embed-code/" class="list-group-item list-group-item-action text-truncate" title="easy twitter embed code" data-toggle="tooltip"><span class="badge badge-info">html</span> easy twitter embed code</a>  
<a href="/view/code/kWRvb/how-to-add-jquery-to-squarespace-site/" class="list-group-item list-group-item-action text-truncate" title="How to add jquery to squarespace site" data-toggle="tooltip"><span class="badge badge-info">javascript</span> How to add jquery to squarespace site</a>  
<a href="/view/code/SHZ3z/make-an-image-white-with-css-using-filter-brightness-and-invert/" class="list-group-item list-group-item-action text-truncate" title="make an image white with css using filter brightness and invert" data-toggle="tooltip"><span class="badge badge-info">css</span> make an image white with css using filter brightness and invert</a>  
<a href="/view/code/ZDkzL/add-a-jquery-date-picker-to-your-text-box/" class="list-group-item list-group-item-action text-truncate" title="add a jquery date picker to your text box" data-toggle="tooltip"><span class="badge badge-info">jquery</span> add a jquery date picker to your text box</a>  
<a href="/view/code/Dy3Nq/foundation-old-grid-format/" class="list-group-item list-group-item-action text-truncate" title="foundation old grid format" data-toggle="tooltip"><span class="badge badge-info">css</span> foundation old grid format</a>  

    </div>

CSS

/* Make List Group Relative */
.list-group a, .core-link a {
    display: block;
    padding: 10px 25px 10px 8px;
    /* text-transform: capitalize; */
    background-image: url(data:image/svg+xml,%3Csvg width='20px' height='16px' viewBox='0 0 16 16' class='bi bi-chevron-right' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E);
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: center;
    position: relative;
}

/* Base Badge */
.badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    position: absolute;
    left: -10px;
    top: -10px;
    border: 2px solid;
    border-radius: 30px;
    text-shadow: 0px 1px 2px #000;
    box-shadow: 0px 1px 2px #111827;
}

/* Light Mode */
.light-mode .badge-info {
    color: #fff;
    background-color: #38b2ac;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
    text-shadow: 0px 1px 2px rgba(0,0,0,0.2);
}

/* Dark Mode */
.dark-mode .badge-info {
    color: #fff;
    background-color: #2e3c50;
    border: 2px solid;
    border-color: rgb(17 24 39);
}