Here is the code:

I've tried many times and searched my answers but none works.

.tag-wrap a {
    font-size: .5em;
    text-decoration: none;
    padding: 5px 11px 5px 8px;
    display: inline-block;
    color: #fff;
    background: #333;
    margin: 3px;
    border-radius: 99px 0 0 99px;
    box-shadow: 0 1px 0 0 rgb(38 38 38 / 10%);
    border: 1px solid #ddd;
    font-family:arial;
}

.tag-wrap a:before {
    content: url(data:image/svg xml,);
    margin-right:4px;
}

<div class="tag-wrap"><a href="#" >Label One</a><a href="#">Label Two</a></div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You could take a modern approach by using a flexbox or grid to vertically center the text.

And if you want the elements next to each other just use inline-flex or inline-grid

.tag-wrap a {
    max-width: 10em;
    font-size: .5em;
    text-decoration: none;
    padding: 5px 11px 5px 8px;
    display: flex;
    align-items:center;
    color: #fff;
    background: #333;
    margin: 3px;
    border-radius: 99px 0 0 99px;
    box-shadow: 0 1px 0 0 rgb(38 38 38 / 10%);
    border: 1px solid #ddd;
    font-family:arial;
}

.tag-wrap a:before {
    content: url(data:image/svg xml,);
    margin-right:4px;
}

<div class="tag-wrap"><a href="#" >Label One</a><a href="#">Label Two</a></div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

add vertical-align: middle to both the circle and the anchor.

.tag-wrap a {
    font-size: .5em;
    text-decoration: none;
    padding: 5px 11px 5px 8px;
    display: inline-block;
    color: #fff;
    background: #333;
    margin: 3px;
    border-radius: 99px 0 0 99px;
    box-shadow: 0 1px 0 0 rgb(38 38 38 / 10%);
    border: 1px solid #ddd;
    font-family:arial;
  vertical-align: middle;
  line-height: 1.5;
}

.tag-wrap a::before {
  vertical-align: middle;
    content: url(data:image/svg xml,);
    margin-right:4px;
    font-size: 0;
}

<div class="tag-wrap"><a href="#" >Label One</a><a href="#">jelly gap</a></div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

If you have no problem with a verbose but more accommodating answer!! Changing the font size of the text changes the dimension of pseudo-class accordingly.

span{
  font-size: 50px;
  display: inline-block;
  padding: 0.5em 1em 0.5em 2em;
  position: relative;
  margin-block: 1em;
}

span::before{
  position: absolute;
  width: 100%;
  height:100%;
  content:'';
  background:orchid;
  z-index:-1;
  top:0;
  left:0;
  border-radius: 2em 0 0 2em;
}

span::after{
  content:'';
  position: absolute;
  top: 50%;
  right: calc(100% - 1.5em);
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: white; 
}

<span>Label One</span>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can easily handle this problem with FlexBox. You do not need to use padding or anything else to place elements to the center. Just add the below styles to your code:

.tag-wrap a {
    display: flex;
    height: 26px;
    padding: 0 11px 0 8px;
    align-items: center;
    width: fit-content;
}

.tag-wrap a:before {
    line-height: 0;
}

<div class="tag-wrap"><a href="#" >Label One</a><a href="#">Label Two</a></div>

<iframe name="sif5" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can add those lines with display:flex property and you want to center the whole text and circle to the center of that div you also should add justify-content:center

.tag-wrap a {
    max-width: 10em;
    font-size: .5em;
    text-decoration: none;
    padding: 5px 11px 5px 8px;
    display: flex;
    align-items:center;
    color: white;
    background: #333;
    margin: 3px;
    border-radius: 99px 0 0 99px;
    box-shadow: 0 1px 0 0 rgb(38 38 38 / 10%);
    border: 1px solid #ddd;
    font-family:arial;
}

.tag-wrap a:before {
    content: url(data:image/svg xml,);
    margin-right:4px;
}

<div class="tag-wrap"><a href="#" >Label One</a><a href="#">Label Two</a></div>

<iframe name="sif6" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>