CSS3技术问题：无法让丝带的:after伪元素随文本长度动态伸缩

嘿，我看你在做带动态文本的CSS丝带时，遇到了:after伪元素没法跟着父容器（丝带）一起伸缩的问题。翻了下你的代码，核心问题出在丝带容器的固定宽度设置，咱们一步步来搞定它：

1. 先让丝带容器能自适应文本宽度 #

你的.ribbon现在硬写了width: 200px，这直接把容器宽度锁死了，不管文本多长都只能卡在200px里，自然没法伸缩。咱们把这个固定宽度改成自适应：

.ribbon {
  font-size: 20px !important;
  /* 去掉固定width，换成auto让容器随内容变宽 */
  width: auto;
  position: relative;
  margin-bottom: 40px;
  left: 120px;
  background: rgba(224, 147, 59, 1);
  color: #fff;
  text-align: center;
  top: 40px;
  padding: 14px 7px;
  z-index: 99;
  min-height: 72px;
  /* 把flex改成inline-flex，让容器只占内容需要的宽度 */
  display: inline-flex;
  align-items: center;
  /* 可选：加个最小宽度，避免短文本时丝带太窄 */
  min-width: 200px;
}

这里把width:200px换成width:auto，同时把display:flex改成display:inline-flex，这样容器就会根据内部文本的长度自动调整宽度了。

2. 确保左侧箭头（.ribbon:after）定位正确 #

你用.ribbon:after做的左侧三角形箭头，它的定位是基于父容器左侧（right:100%）的，只要父容器宽度自适应了，这个箭头会自动跟着容器的左侧走，不需要额外修改。不过要确认它的border-width和父容器的高度匹配——你现在设置的border-width:36px刚好是min-height:72px的一半，垂直居中的效果是对的，保持原样就行：

.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;
}

3. 修复右下角的小三角（.ribbon-content:after） #

原来的.ribbon .ribbon-content:after是绝对定位，但ribbon-content是strong元素（默认是inline），没有相对定位的话，绝对定位会基于.ribbon而不是自身，导致小三角位置不对。咱们给ribbon-content加个相对定位：

.ribbon .ribbon-content {
  position: relative;
  /* 让文本自动换行，避免溢出容器 */
  white-space: normal;
}

.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;
}

这样右下角的小三角就会牢牢固定在丝带的右下角，不会因为文本长度变化而跑偏。

最终效果 #

修改完之后，不管你的文本是短句子还是长段落，丝带容器都会自动调整宽度，左侧的箭头会始终跟着容器边缘，右下角的小三角也会保持在正确位置，完美适配动态文本~

内容的提问来源于stack exchange，提问作者Alex