【CSS】react-markdown组件，大模型输出Markdown格式内容增加光标效果

项目场景：

大模型输出时，偶尔会有输出卡顿的情况，需要做一个光标效果告诉客户正在生成而不是已经完成了。
由于Markdown格式会有行内元素和块级元素（主要是有序列表和无序列表ul，ol，li标签），所以需要单独做处理。
markdown组件使用的react-markdown@8.0.7版本

---

解决方案：

使用CSS需要考虑兼容性，如果想要兼容低版本浏览器，需要使用JS来辅助，找到最后一个元素的最后一个子元素来增加类名

在大模型输出的时候给markdown添加class=“markdown-container”，生成结束去掉这个class。

浏览器	兼容性
Safari 15.4+	需启用 :has()
Chrome 105+	原生支持
Firefox 121+	开启实验性功能 使用 JS 动态标记
Edge 120+	原生支持

// 适用于markdown中常见的正文
.markdown-container > :not(ol):not(ul):not(pre):last-child:after, 
.markdown-container > pre:last-child code:after,
// 针对markdown中的ul,ol
.markdown-container > :is(ul,ol):last-child > li:last-child p:last-child:after, 
.markdown-container > :is(ul,ol):last-child > li:last-child:not(:has(>p)):not(:has(*>li)):after, 
.markdown-container > :is(ul,ol):last-child > li:last-child>:is(ul,ol):last-child>li:last-child:not(:has(>p)):not(:has(*>li)):after, 
.markdown-container > :is(ul,ol):last-child > li:last-child>:is(ul,ol):last-child>li:last-child>:is(ul,ol):last-child > li:last-child:not(:has(>p)):after {
    display: inline-block;
    content: "";
    margin: 0 .2em;
    width: 14px;
    height: 14px;
    border-radius: 100%;
    background-color: black;
    vertical-align: text-bottom;
    transform: translate3d(0, -2px, 0);
    animation: blink .7s infinite;
}

@keyframes blink {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}