CSS3 - 无法根据文本长度使功能区增长\收缩

Question

我正在尝试使用动态文本创建一个css功能区，但我很难将:after元素grow \ shrink作为其父元素。 CodePen code here.
例如，HTML：

<span class="ribbon hidden-xs">
  <strong class="ribbon-content ng-binding" id="ribbonText">this is a dummy text</strong>
</span>

<span class="ribbon hidden-xs">
  <strong class="ribbon-content ng-binding" id="ribbonText">this is a dummy text this is a dummy text this is a dummy text this is a dummy text this is a dummy text this is a dummy text</strong>
</span>

CSS：

.ribbon {
  font-size: 20px !important;
  width: 200px;
  position: relative;
  margin-bottom: 40px;
  left: 120px;
  background: rgba(224, 147, 59, 1);
  color: #fff;
  text-align: center;
  right: 5px;
  top: 40px;
  padding: 14px 7px;
  z-index: 99;
  min-height: 72px;
  display: flex;
  align-items: center;
}

.ribbon:after {
  right: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-right-color: rgba(224, 147, 59, 1);
  border-width: 36px;
  top: 50%;
  margin-top: -36px;
}

.ribbon .ribbon-content:after {
  content: "";
  position: absolute;
  display: block;
  border-style: solid;
  border-color: #999 transparent transparent transparent;
  bottom: -10px;
  right: 0;
  border-width: 10px 10px 0 0;
}