css气泡框的实现

关于css气泡框

，目标是实现，盒子被内容撑开后向上飘。还有一个动画效果，但是实际上盒子被内容撑开之后，是向下覆盖。本质上是元素的左上角相对父级定位，如何在不使用css的情况下向上飘。

.text{
				position: absolute;
				top:50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 200px;
				height: 50px;
				background-color: coral;
				border-radius: 20px;
			}
			.text::after{
				content: '';
				position: absolute;
				top:50px;
				right:20px;
				border-bottom: 30px solid transparent;
				border-right: 30px solid transparent;
				border-top: 30px solid green;
				border-left: 30px solid transparent;
				
			}
			.text .con{
				position: absolute;
				border-radius: 8px;
				bottom: 0;
				background-color: goldenrod;
				height: 30px;
				word-wrap: break-word;
				width: 100px;
			}
			.text .con::after{
				content: '';
				position: absolute;
				left: 1.25rem;
				bottom: -60px;
				border-style: solid;
				border-width: 30px;
				border-color: goldenrod transparent transparent transparent;
				overflow: ;
			}

这样是固定向上浮，如果元素被撑开是不符合预期的