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

【问题标题】：How can i position the pills arrow in right center of the long text ?如何将药丸箭头定位在长文本的右中心？
【发布时间】：2018-09-19 09:37:55
【问题描述】：

我有一个带有长文本的标题，我似乎无法想出正确的 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>

【问题讨论】：

标签： html css bootstrap-4 nav-pills

【解决方案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;
}

注意：箭头不会直接集中，因为空的c-cta-box-content div 是在a 标记的相对空间中计算的。

【讨论】：

非常感谢@chikenDinner 你拯救了我的一天。现在可以正常使用了！

【解决方案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;
}

【讨论】：