如何将药丸箭头定位在长文本的右中心？

Question

我有一个带有长文本的 header，我似乎无法想出合适的 css 来使所有文本都位于右侧中央的药丸。我需要两行或更多行，药丸需要位于正确区域的中心。谁能告诉我这是怎么做到的？任何帮助表示赞赏。

.c-cta-box-link{
  text-decoration-color: #ffffff;
}

a{
  color: #000;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}
.c-cta-box-header {
    padding: 1px 15px 8px;
    background-color: #bbce00;
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    }
    
.c-cta-box-headline {
    margin-bottom: 0;
    padding-right: 20px;
    font-size: 18px;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-text-decoration-color: #fff;
    text-decoration-color: #fff;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    
    }
    
    .c-cta-box-content {
    height: calc(100% - 40px);
    padding: 10px;
    color: #000;
    font-size: 14px;
    font-weight: 300;
    }
    
    .c-cta-box-link:after {
    content: "";
    position: absolute;
    top: 10%;
    right: 7%;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-right: none;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #fff;
    margin: 0;
    white-space: nowrap;
}

<a title="Download som PDF her" href="/-/media/wakeup/pdf/organisationsdiagram-dk-01-07-2017.pdf?la=da&amp;hash=69E3519ABB423F7EA21E655A18F2C7BCAA84A4E5" target="Aktiv browser" class="c-cta-box-link">
<div class="c-cta-box-header">
  <h2 class="c-cta-box-headline">Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF Download som PDF  </h2>
</div> 
<div class="c-cta-box-content"></div>
</a>

Answer 1

这应该有助于集中箭头，更新以下元素：

a {
   position: relative;
   display: block;
   color: #000;
   text-decoration: none;
   background-color: transparent;
   -webkit-text-decoration-skip: objects;
}
.c-cta-box-link:after {
   content: "";
   position: absolute;
   top: 50%;
   margin-top: -3px;
   right: 7%;
   width: 0;
   height: 0;
   border-top: 6px solid transparent;
   border-right: none;
   border-bottom: 6px solid transparent;
   border-left: 6px solid #fff;
   margin: 0;
   white-space: nowrap;
}

注意：由于在a标签的相对space中计算了空c-cta-box-contentdiv，因此箭头不会直接集中。

Answer 2

我通过添加这个顶部轻松解决了这个问题：calc(50% - 20px); Calc 是一项功能，可让您直接在 CSS 中执行数学计算。它的一个很酷的特性是你可以混合和匹配单位，这样你就可以要求一个百分比单位，然后从百分比大小中减去一个像素大小。

.c-cta-box-link:after {
    content: "";
    position: absolute;
    top: calc(50% - 12px);
    right: 7%;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-right: none;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #fff;
    margin: 0;
    white-space: nowrap;
}

如何将药丸箭头定位在长文本的右中心？

How can i position the pills arrow in right center of the long text ?

html

css

bootstrap-4

nav-pills